vue.js webpack 项目升级成vite项目

将webpack升级成vite得步骤：

1.把 public/index.html 移动到项目根目录，把文件中的 %PUBLIC_URL% 去掉

// %PUBLIC_URL%就是指向对应的public文件夹的绝对路径

2.把 src/index.js 入口文件，改成 src/main.ts ，并在 index.html 文件中引入

3.整理一下 package.json , 删除不需要的依赖，

如 eslint, babel, webpack,各种 loader 和 plugin 等依赖，

修改 scripts, 启动以及打包命令 vue-cli-service serve ==>vite ;vue-cli-service build ==>vite build

修改 devDependencies , 添加vite（ "vite": "^2.4.2",）

4.删除 node_modules 文件夹，删除 yarn.lock package-lock.json ，并重新安装依赖

5.删除 vue.config，以及包含了一些 webpack 的配置和启动脚本，如果你的项目没有，可以忽略

6.在根目录新建 vite.config.js 配置文件，迁移配置

7.由于 vite 不支持 require() 导入, 你需要找到你项目中

全部的 require 函数进行手工修改，比如动态图片：

require(`./images/device-header-${index + 1}.png`)改成

new URL(`./images/device-header-${index + 1}.png`, import.meta.url).href;

如果你使用了 require.context 一次导入多个文件：

const modulesContext = require.context('../../views', true, /\.routes\.ts$/)改成

const modulesContext = import.meta.globEager('../../views/**/*.routes.ts')

8.有的项目中使用了环境变量判断

如 process.env.NODE_ENV === 'development'

在node环境defineConfig({mode}=>{mode})

在前端环境import.meta.env

环境变量的的修改：VUE_APP_XX ==> VITE_XX

金钥匙