Vue2.7.14、vuecli@5.0.8 升级 vite@4.4.8

 项目背景

Vue2.7.14、vuecli@5.0.8、element-ui@2.15.13、node14.18.3

vite安装

pnpm add vite@4.4.8 -D

入口文件index.html

文件位置修改

将pulic里的index.html移到根目录下

根目录/public/index.html 到 根目录/index.html

文件内容修改

<link rel="icon" href="<%= BASE_URL %>favicon.ico"> #remove
<link rel="icon" href="/favicon.ico"> #add
<script type="module" src="/src/main.js"></script> #add<title>Vue</title> 

 title如果是动态的，可以引入 vite-plugin-html

vite.config.js

import { defineConfig } from 'vite'
//让浏览器支持commonjs语法
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
//配置vue
import vue from '@vitejs/plugin-vue2'
import path from 'path'
//兼容require
import vitePluginRequire from 'vite-plugin-require'
//gzip压缩
import viteCompression from 'vite-plugin-compression'const REPLACEMENT = `${path.resolve(__dirname, './src')}/`export default defineConfig({server: {host: '0.0.0.0',https: false,port: 8080,proxy: {'/web': {// 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可target: 'https://baidu.com:10011', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURLsecure: false,changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端ws: true //,       // 是否启用  websockets;}}},resolve: {alias: {'@utils': `${path.resolve(__dirname, './src/utils')}/`,styles: `${path.resolve(__dirname, './src/styles')}/`,'@assets': `${path.resolve(__dirname, './src/assets')}/`,'@': REPLACEMENT,'@/': REPLACEMENT,'src/': REPLACEMENT,vue: 'vue/dist/vue.esm.js' //解决el-table 生产环境不显示},extensions: ['.vue', '.js', '.jsx', '.mjs', '.ts', '.tsx', '.json', '.css', '.scss']},css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/common.scss";`}}},build: {minify: 'terser',sourcemap: false,// 进行压缩计算brotliSize: false,modulePreload: false,chunkSizeWarningLimit: 1000,target: 'es2015', // 设置目标浏览器的最低版本terserOptions: {compress: {// 打包自动删除consoledrop_console: true,drop_debugger: true},keep_classnames: true},rollupOptions: {output: {// 分包manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString()}}}}},plugins: [vue(), //配置vueviteCommonjs(),vitePluginRequire(), //兼容requireviteCompression({verbose: true, // 输出压缩成功默认即可disable: false, //开启压缩(不禁用)，默认即可deleteOriginFile: false, //删除源文件threshold: 1024, //压缩前最小文件大小algorithm: 'gzip', //压缩算法ext: '.gz' // 生成的压缩包后缀})],optimizeDeps: {include: ['vue', 'vuex', 'sass', 'vue-router'],exclude: ['fsevents']}
})

package.json

"scripts": {"dev": "vite","build": "vite build","build-dev": "vite build --mode dev",},

---

代码优化

为保险起见，上面的东西配置好了之后，本地启动检查没问题，打包放到测试也没问题，接下来开始进行配置优化。

vue.config.js、webpack、vue/cli-service、babel多余的插件和配置开始逐步删除和卸载

删了发现还是正常可以跑的，自己检查没啥问题，就放心发到测试环境交给测试了

---

vite打包和启动问题汇总

1、The JSX syntax extension is not currently enabled

The esbuild loader for this file is currently set to "js" but it must be set to "jsx"

to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

如果是在.vue文件中带有jsx语法, 则在script标签下增加该标识

//.vue文件
<script lang="jsx">

2、/src/element-variables.scss Error: Can't find stylesheet to import.

// vite.config.js
css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/common.scss";`}}},

3、No matching export in "src/utils/dialogUtils.js" for import "loading"

dialogUtils.js 不存在loading,找到对应的.vue文件删除loading 引入

4、Internal server error: Unexpected token (1:0)  Uncaught ReferenceError: require is not defined

pnpm i @originjs/vite-plugin-commonjs -D

// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
plugin:[viteCommonjs()
]

5、[vite] Internal server error: Can't find stylesheet to import.

@import '~element-ui/packages/theme-chalk/src/index';

删除 @import '~element-ui/packages/theme-chalk/src/index';

使用 import 'element-ui/lib/theme-chalk/index.css'

6、使用qrcodejs2生成二维码，报错：Cannot read properties of undefined (reading ‘_android‘)

pnpm add qrcodejs2-fix -D
import QRCode from 'qrcodejs2'; //remove
import QRCode from 'qrcodejs2-fix'; //add

7、开发环境el-table无法渲染的问题

一开始插件引入了vite-plugin-vue2 ---> Vue2.7

后移除改成 @vitejs/plugin-vue2 ---> Vue2.7

pnpm add @vitejs/plugin-vue2 -D

//vite.config.js
import vue from '@vitejs/plugin-vue2'plugins: [vue()
]

8、[ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node

// vite.config.js
optimizeDeps: { exclude: ["fsevents"] },

9、import * as _vite_plugin_require_transform_get_intrinsic_0 from "get-intrinsic";

 var GetIntrinsic = _vite_plugin_require_transform_get_intrinsic_0.default || _vite_plugin_require_transform_get_intri...

import * as vite_plugin_require_transform./_1 from "./";

pnpm add vite-plugin-require-transform -D

// vite.config.js
import requireTransform from 'vite-plugin-require-transform'
requireTransform({fileRegex: /.vue$/})

10、第9个搞完后启动没问题、打包报错

pnpm remove vite-plugin-require-transformpnpm add vite-plugin-require-transform -D

import vitePluginRequire from 'vite-plugin-require';
plugins: [vitePluginRequire()],

11、启动打包到测试环境发现el-table不显示，本地没问题

alias: { vue: 'vue/dist/vue.esm.js' },