vue2.7项目迁移到vite5

安装vite和vite支持vue2.7的插件。

yarn add vite -D
yarn add @vitejs/plugin-vue2 -D

根目录添加 vite.config.js 文件

import { defineConfig } from 'vite'
import  vue from '@vitejs/plugin-vue2' 
import path from 'path'
export default defineConfig({
plugins: [ 
    vue(),
],
server:{
     host:'0.0.0.0',
     
    // ......复制原来vue.config.js 的server过来。把pathRewrite改成rewrite
},
resolve: { alias: { "@": path.resolve(__dirname,"./src") } },
})

修改环境变量

• .env* 文件里的环境变量加上VITE_前缀
• process.env.BASE_URL 改成 import.meta.env.BASE_URL

修改入口index.html,把index.html移到根目录。

• 去掉ejs写法。<%= htmlWebpackPlugin.options.title %>
• 在body添加入口标签<script type="module" src="/src/main.js"></script>

修改所有模块导入导出写法。

• require导入的改为 import导入
• module.exports = xxx 改成 export default xxx
• const modulesFiles = require.context('./modules', true, /.js$/) 改为 const modulesFiles = import.meta.glob("./modules/*.js") 此时需要注意modulesFiles已经变成了一个对象了，想要循环做处理的打印看一个就知道怎么办了。
• 检查所有导入的文件路径，必须写全路径，包括.vue,.js等后缀。

css

• 如果你在 js 中使用 scss的变量，那么 scss 文件名要改成 .module.scss 结尾的
• 不支持~写法,例如这种 @import "~element-ui/packages/theme-chalk/src/index" ，要去掉~

删除不需要的依赖

• 删掉 @vue/cli-xxxxx 那堆东西

• 删掉 sass-loader

• 把 node-sass 换成 sass

• 删掉 vue.config.js 文件

• vite预期是支持现在浏览器的，所以babel相关的都删掉

• core-js 删掉

eslint升级

.eslintrc文件修改 parserOptions: { parser: "babel-eslint", },// remove

env: { node: true, es2022: true, // 👈 add this }

升级 yarn add eslint@8 eslint-plugin-vue@8

设置命令

"dev": "vite" "build": "vite build"

运行

yarn dev