💡 初衷：解决项目打包时间较慢，为了更好的提升开发效率和开发体验
vite的优势以及相关运行机制就不赘述了，大家可以自行查阅vite官网
| 改造前 | vue-cli |
|---|---|
| vue | 2.6.14 |
| @vue/composition-api | 1.4.4，使用vue3的新特性 |
| unplugin-vue2-script-setup | 0.6.17,vue2中使用 语法糖 |
| node | 14.17 |
🌈 兼容性：
-
考虑到vue2.7对vue3的新特性做了很好的向后兼容，并且默认支持vue3的相关Api 和
<script setup>语法糖，将vue版本升级为2.x的最后一个稳定版本2.7.14 -
其次Vite 需要 Node.js 版本 14.18+，16+。有些模板需要依赖更高的 Node 版本才能正常运行，所以对应升级升级 Node 版本。我采用的是
14.18.2
项目改造
安装vite
涉及两个包vite、@vitejs/plugin-vue2
添加入口文件index.html
入口文件 index.html 以及favicon.ico 图片移动到根目录
vite 文件中 script 不再动态插入，所以在index.html中导入main.js 文件
<script type="module" src="/src/main.js"></script>
添加vite.config.js
根目录添加vite.config.js文件并添加相关的配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
export default defineConfig({
plugins: [vue()],
})
更改package.json script
将脚本命令改为vite命令
关于代码改造总结下来涉及以下几点：
- 将@vue/composition-api 全局替换为vue，移除main.js 中的引入
- 删除组件中style的scss变量文件引入，改为vite配置，查看配置
- js中使用scss变量需要改为导入
.module.css文件，参考链接 - 涉及路由解析使用的
path模块，改为path-browser - 动态路由采用import.meta.glob 方案
依赖清理
- @vue/cli-plugin-babel //remove
- @vue/cli-service //remove
- @vue/cli-plugin-unit-jest
- @vue/cli-plugin-eslint
- @vue/composition-api
- unplugin-vue2-script-setup
- ......
💥Tips:
项目改造要因地制宜，根据自身项目情况来调整，有些社区的包可能还不支持ESM，会导致vite的预构建问题。
