BLADEX前端框架从Vue2升级Vue2.7完整实践：Vite替换Webpack与TypeScript集成

公司项目前端使用了bladex的前端框架Saber，使用了webpack和vue2，本人花了两个通宵把项目框架升级为vite和vue 2.7，并增加了TypeScript支持，为以后升级vue 3打下了良好的基础。升级以后，项目开发启动速度更快，编程体验更好。本人把这次升级遇到的问题统一整理了一下，供大家参考。

升级原因

Vue CLI升级Vite

随着前端功能越来越多，项目启动速度也越来越慢。当保存文件，需要几秒钟才能更新完成。开发速度慢，体验不好。

同样的一个项目，例如生产运营v2.0前端。使用传统的脚手架Vue CLI，需要100多秒才能启动；而使用下一代前端开发与构建工具Vite，仅需要400毫秒。

目前，Vue CLI已处于维护模式。推荐使用Vite代替Vue CLI。

Vue2升级Vue2.7

Vue 是一款用于构建用户界面的 JavaScript 框架。2020年vue3.0发布，至今已经三年。2022年2月7日，Vue3变为默认版本。Vue 2将于2023年12月31日停止维护。

但是，项目太大，没有多余的时间升级Vue3。如果新代码也用Vue2编写，会导致以后升级Vue3时会越来越困难。

Vue 2.7提供了一种解决方案，它在兼容Vue2的前提下，对Vue3的特性做了支持。可以在Vue2项目中使用Vue3语法。等以后项目升级Vue3时，这部分代码不需要重写。

添加TypeScript支持

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

项目中使用TypeScript，可以为函数参数和返回值定义静态类型。让许多错误，在编写代码过程中就会发现，不需要等到编译阶段甚至运行阶段才会发现错误。

升级方法

确定依赖项

1、使用Vite创建一个Vue2.7项目，并添加TypeScript和JSX支持。

我们首先创建一个Vue 2.7的项目，看看需要哪些依赖包。在命令行输入npm init vue@2，开始创建Vue项目，注意添加TypeScript和JSX支持。

我们进入项目文件夹，执行yarn install安装依赖包，执行npm run dev启动项目，可以在浏览器访问，看看项目是否能正常运行。

2、查看package.json文件，找到依赖项。

打开package.json文件，我们可以看到项目依赖项。

替换依赖项

1、新建本地分支。

为了避免把项目弄坏，新建本地分支test-vite，切换到该分支。

2、确定原项目可以正常运行。

在前端目录，执行yarn install安装依赖，执行yarn run serve启动项目，在浏览器访问看看是否能正常运行。

3、移除旧依赖项。

yarn remove babel-polyfill babel-eslint @babel/core @babel/eslint-parser @babel/preset-env @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service @vue/eslint-config-prettier babel-plugin-import babel-plugin-transform-remove-console webpack-bundle-analyzer less-loader sass-loader

4、添加新依赖项。

yarn add vue@^2.7.7 vue-router@^3.5.4



yarn add @rushstack/eslint-patch@^1.1.0 @types/node@^16.11.45 @vitejs/plugin-legacy@^2.0.0 @vitejs/plugin-vue2@^1.1.2 @vitejs/plugin-vue2-jsx@^1.0.2 @vue/eslint-config-prettier@^7.0.0 @vue/eslint-config-typescript@^11.0.0 @vue/tsconfig@^0.1.3 eslint@^8.5.0 eslint-plugin-vue@^9.0.0 npm-run-all@^4.1.5 prettier@^2.5.1 terser@^5.14.2 typescript@~4.7.4 vite@^3.0.2 vue-tsc@^0.38.8 vite-plugin-externals@ ^0.6.2 -D



yarn add @originjs/vite-plugin-commonjs sass@ ^1.58.3 -D



yarn add leaflet-shape-markers@1.x lodash.debounce@^4.0.8"

文件修改

1、删除文件。

删除babel.config.js、vue.config.js、vue.config.public.js。

2、添加新文件。

添加.env、.env.development、.env.production、vite.config.js文件。

.env、.env.development、.env.production是环境变量定义文件，可以定义开发环境和生产环境用到的环境变量。注意环境变量需要以VITE_开头。

vite.config.js是vite配置文件，相当于旧项目的vue.config.js。文件中，加载环境变量文件，可以配置开发服务器和代理，定义环境变量，指定@表示的路径和import时不需要添加后缀的文件类型，配置json和css，进行生成配置，添加插件。

3、 修改index.html文件。

将index.html从public文件夹移动到根目录。将文件中的所有<%= BASE_URL %>替换成/，保证所有引入的css文件和js文件都以/开头。

修改index.html引入的vue版本为2.7.14，保证和package.json文件中的vue版本一直。

在index.html最后添加，添加入口文件脚本。

4、修改package.json文件中的启动脚本。

修复错误

开发错误

执行yarn run serve启动项目，修复项目中的错误。

1、 [vite] Internal server error: [sass] expected selector. /deep/。

解决方法：将/deep/替换成::v-deep即可。

2、types.js:40 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

解决方法：vite-plugin-resolve-externals插件问题，将vite-plugin-resolve-externals从vite.config.js插件列表中去掉即可。

3、Uncaught ReferenceError: global is not defined

解决方法：移除webpack模块，yarn remove webpack

4、Uncaught TypeError: Cannot redefine property: $router

解决方法：注释掉html中引入的vue-router。

5、global is not defined

解决方法：将utils/vue-free.js中的global.VUE_FREE = prevent改为window.VUE_FREE = prevent

6、Uncaught ReferenceError: require is not defined

解决方法：将文件src\views\plugin\workflow\components\index.js中的require替换成import

将项目中所有动态require替换为import

7、error Parsing error: Unexpected token import

解决方法：将.eslintrc.js中的parserOptions.ecmaVersion由2018改为2021

8、跳转到登录页面，显示为空白页。

产生原因：在html文件中和package.json中引入两个vue脚本。

解决方法：可以配置vite-plugin-externals插件都使用html文件中的vue。

9、The .native modifier for v-on is only valid on components but it was used on