新增的依赖

  • path-browserify：在浏览器环境中使用 path 相关的方法
  • vite：作为 dev-server 和构建工具来进行引入
  • vite-plugin-vue2：使得 vite 支持 vue2 项目

    添加的配置文件

    ```javascript import { createVuePlugin } from ‘vite-plugin-vue2’ import { resolve } from ‘path’

export default { resolve: { extensions: [‘.vue’, ‘.js’, ‘.ts’], alias: { ‘@’: resolve(__dirname, ‘src’) } }, plugins: [ createVuePlugin() ], build: { sourcemap: true } }

  1. 对文件添加 `alias` 支持，支持直接通过 `@` 进行引入。设置 `extensions` ，使得 vue 文件可以自动补全，默认值为 `['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']` 。
  2. <a name="B6Wep"></a>
  3. ## 将 index.html 文件提到根目录
  4. 在 `vite` 中，以 `index.html` 文件作为入口，所以需要将 `index.html` 文件从 `public` 中提到根目录。
  5. ```html
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="utf-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  12.   <title>Hello</title>
  13. </head>
  14. <body>
  15.   <div id="app"></div>
  16.   <script src="./src/main.js" type="module"></script>
  17. </body>
  18. </html>

修改 .env 文件

在 vite 中，对 .env 文件的使用需要从 process.env 改为 import.meta.env 。针对环境的设置可以使用 --mode 或 -m 来进行设置， 例如 vite --mode dev 可以将开发环境设置为 dev ，直接引用 .env.dev 文件中的内容。
在对 .env 文件中的内容进行设置的时候，为了安全起见，在客户端暴露时，需要添加 VITE_ 前缀，例如 VITE_APP_BASE_HOST 。然后在文件中进行引用的时候可以直接使用 import.meta.env.VITE_APP_BASE_HOST 。

  1. axios.create({
  2.   baseURL: import.meta.env.VITE_APP_BASE_HOST,
  3.   withCredentials: true,
  4.   timeout: 10000
  5. })

文件引用方式的修改

对于普通的 js 文件，我们可以使用 alias 的引用方式。但对于 SFC 中对组件的引用，我们需要使用单独的 ../../ 的引用方式。因为，它会与 alias 的引用方式产生冲突。
对 variables.less 文件的引用无法使用插件完成全局的引用，所以暂时需要在需要这个文件的地方进行手动的引入。