vue2将webpack改为vite

1、修改环境变量：之前vue-cli使用的是VUE_APP开头的环境变量，vite使用的是VITE_开头的环境变量，所以需要修改环境变量。
2、修改环境变量引用：vue-cli使用的是process.env而vite使用的是import.meta.env。
3、index.html文件改动：
    1、vite默认会从根目录找index.html文件，所以确保index.html在根目录下。
    2、如果有使用HtmlWebpackPlugin插件，在vite中需要使用vite-plugin-html插件。
4、修改page.json文件：
    1、运行命令"dev": "vite", 打包命令"build": "vite build"
    2、删除core.js包、删除 "@vue/cli-*"相关包、删除sass-loader包、删除babel-*相关包
    3、安装 "@vitejs/plugin-vue": "^1.6.1"、"vite": "^2.9.18"、"vite-plugin-vue2": "^1.9.0",
5、删除魔法注解：/* webpackChunkName: "XXXX" */,vite中魔法表明不生效，也可以不删除
6、新增vite.config.js文件：基础配置：

1. import { defineConfig } from 'vite'
2. import { createVuePlugin as vue } from "vite-plugin-vue2" // 重要-vue2需要使用
4. const path = require("path")
5. export default defineConfig({
6.   plugins: [vue()],
7.   resolve: {
8.     alias: {
9.       "@": path.resolve(__dirname, "./src"),
10.     },
11.     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
12.   },
13.   esbuild: {
14.     // 此配置是为了在vue中使用jsx
15.     jsxFactory: "h",
16.     jsxFragment: "Fragment",
17.     jsxInject: "import { h } from 'vue';",
18.   }
19. })

复制代码

7、删除babel.config.js
8、jsx使用需要在script标签中添加lang="jsx"，如：<script lang="jsx">
9、批量引入文件：webpack中使用require.context()批量引入文件，vite中使用import.meta.glob()批量引入文件。
10、全局scss文件：在vite.config.js中配置scss全局样式，且不能再在vue文件中使用import引入，还没找到怎么在template中使用全局样式的方法，如：   

1. css: {
2.         preprocessorOptions: {
3.             scss: {
4.                 javascriptEnabled: true,
5.                 additionalData: `
6.                     @import '文件路径';
7.                     @import '文件路径';
8.                 `
9.             }
10.         }
11. }

复制代码

11、将使用的node_modules里使用的包单独打包出来： 

1. build: {
2.     "minify":false,
3.     "rollupOptions":{
4.       "output":{
5.         "manualChunks":(id)=>{
6.           if(id.includes('node_modules')){
7.             return 'vendor';
8.           }
9.         }
10.       }
11.     }
12.   }

复制代码

参考文档：https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。