Vue2项目打包方式webpack升级vite

配置文件

vite.config.ts

源代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import createSvgSpritePlugin from 'vite-plugin-svg-sprite'
const path = require('path')
import legacy from '@vitejs/plugin-legacy'

export default defineConfig(({ mode }) => {
    const configFile = require(`./config/${mode}.env.js`)
    const defineMap = {}
    // 解决vite不兼容process.env
    Object.keys(configFile).forEach(key => {
        defineMap[`process.env.${key}`] = JSON.stringify(configFile[key])
    })
    return {
        build: {
            target: 'es2015'
        },
        plugins: [
            vue(),
            vueJsx(), // 兼容jsx语法
            createSvgSpritePlugin({
                symbolId: 'icon-[name]'
            }), // 兼容svg图片
            legacy({
                targets: ['chrome >= 65', 'edge >= 79', 'safari >= 11.1', 'firefox >= 67'],
                ignoreBrowserslistConfig: true,
                renderLegacyChunks: false,
                additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
                modernPolyfills: true
            }) // 兼容部分老旧浏览器
        ],
        server: {
            host: '0.0.0.0',
            port: 9700,
            open: false, //自动打开
            proxy: {
                '/web': {
                    target: 'http://www.dev.com', // 开发环境
                    // target: 'http://www.test.com', // 测试环境
                    changeOrigin: true
                }
            }
        },
        define: defineMap,
        esbuild: {
            pure: ['console.log'],
            drop: ['debugger'],
            target: 'es2015'
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src')
            },
            extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
        }
    }
})

升级结果

提升

1.升级完成项目启动由约3min多减少约2s内
2.代码更新效果时间约10s减少到无感
3.代码包体积减少1/4以上
4.打包时间减少2/5左右

升级流程

一、安装依赖

npm install vue@2.7.14
npm install vite
npm install vite-plugin-vue2
npm install vite-plugin-svg-sprite
npm install vitejs/plugin-legacy
npm install -D sass

plugin	说明
vue@2.7.14	vue2已经是最终版了，直接升级到2.7.14，这样才可以兼容vite同样 elementUI应该也是最终版了，建议升级最终版
vite	使用vite打包
vite-plugin-vue2	兼容vue2语法
vitejs/plugin-vue2-jsx	兼容vue2的jsx语法
vitejs/plugin-legacy	传统浏览器兼容
sass	vite打包需要安装sass，版本过低的sass需要升级sass版本

二、修改打包命令

package.json文件

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

三、修改vite打包入口

index.html

<script type="module" src="/src/index.js"></script>

四、根目录新建vite.config.ts文件

顶部配置文件

五、遇到的问题

1.css的/deep/

vite打包css不可以使用sass的/deep/语法

全局替换成::v-deep

2.webpack中使用require引入文件

vite中需要改成import引入

3.svg字体图标的批量导入变更

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.盗版浏览器

升级的项目是对外的，遇到了2345浏览器非官网版本白屏

报错Uncaught ReferenceError: globalThis is not defined

粗暴的解决方案（暂未有其他解决方案）

// 在index.html文件添加
<script>
    if (globalThis === 'undefined') {
        var globalThis = window
    }
</script>

使用说明

vue-router的使用

vue2可以使用ref和reactive，没有使用proxy实现，还是用了defineProperty的getter, setter

先看一下vue3 + vue-router ^4.0

<script>
    import { useRoute } from 'vue-router';
    const route = useRoute();
    route.path // /home
</script>

如何在vue2.7 + vite中使用vue-router

<script>
    import { useRoute } from 'vue-router/composables'
    const route = useRoute();
</script>