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

本项目内部项目，不涉及CDN加速

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'
import { visualizer } from 'rollup-plugin-visualizer'
import obfuscatorPlugin from 'vite-plugin-javascript-obfuscator'

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:8080', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
        secure: 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: 'esbuild',
    sourcemap: false,
    // 进行压缩计算
    brotliSize: false,
    modulePreload: false,
    chunkSizeWarningLimit: 10240,
    target: 'es2015', // 设置目标浏览器的最低版本
    rollupOptions: {
      treeshake: true,
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
        // 分包
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },
  plugins: [
    visualizer(), //分析构建
    vue(), //配置vue
    viteCommonjs(),
    vitePluginRequire(), //兼容require
    viteCompression({
      verbose: true, // 输出压缩成功默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件
      threshold: 1024, //压缩前最小文件大小
      algorithm: 'gzip', //压缩算法
      ext: '.gz' // 生成的压缩包后缀
    }),
    obfuscatorPlugin({
      include: ['src/*.js', 'src/utils/*.js'],
      exclude: [/node_modules/],
      apply: 'build',
      debugger: true,
      options: {
        debugProtection: true
      }
    })
  ],
  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自带的terser

//vite.config.js
build{
    minify: 'terser',
    terserOptions: {
      compress: {
        // 打包自动删除console
        drop_console: true,
        drop_debugger: true
      },
      keep_classnames: true
    },
}

但是打包时间过久，所以决定将terser改回esbuild,然后深度混淆加密采用的外部插件 vite-plugin-javascript-obfuscator

pnpm add vite-plugin-javascript-obfuscator -D

//vite.config.js
import obfuscatorPlugin from 'vite-plugin-javascript-obfuscator'
obfuscatorPlugin({
    include: ['src/*.js', 'src/utils/*.js'],
    exclude: [/node_modules/],
    apply: 'build',
    debugger: true,
    options: {
       debugProtection: true
    }
})

 块大小警告的限制（以 kbs 为单位）

chunkSizeWarningLimit: 1024, -----> chunkSizeWarningLimit: 10240,

效果： 打包时间由原来的48s左右变为10s左右，大的项目由2min 提速到了1min左右，当然如果不是内部项目，加上CDN，可以起飞了

---

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-transform

pnpm add vite-plugin-require -D

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

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

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