老项目简介
技术框架
vue 2.5.17
webpack 4.16.5
"webpack-cli": "3.1.0"
"node-sass": "^4.7.2"
几个阶段
第一步:vue2 升级到最新
第一步:升级 vue2 至最新版本,截止到目前(2024-10-21),最高的 vue 版本是 "vue": "^2.7.16"
这一步会比较丝滑,2版本兼容的挺好的
第二步:寻找项目只能在 Node 低版本下运行的原因
什么叫版本只能在低版本运行的原因呢:举个例子,比方说我的项目必须用
Node 8
版本启动,其他版本就不行
第二步:寻找 node
版本锁死的原因:node-sass
!!!
这个依赖包版本是跟 node
版本强绑定的 ,具体可以看一下这个
所以我改成了 sass
,也叫 dart-sass
这一步需要修改源码了!
因为 sass
只支持 ::v-deep
,而 node-sass
同时支持/deep/
和 ::v-deep
所以,可以全局搜索 /deep/
为::v-deep
,这一步可能会改很多的文件!记得修改完之后跑一下试试!
此时,我们的 node
版本大概可以支持到 node V16
,这个的限制是因为 webpack4
了
根据 Webpack 4 的官方文档和社区反馈,Webpack 4 支持的最高 Node.js 版本是 14.x。
建议使用 Node.js 14.x 版本以获得最佳的兼容性和性能。
替换 webpack 为 vite
这一步的工程量也是挺大的,大概有如下几点
-
安装
vite
javascriptnpm install --save vite
-
安装你项目语言的插件(例如vue2,vue3,react 等),我的是
vue2
javascriptnpm install --save @vitejs/plugin-vue2 import vue2 from "@vitejs/plugin-vue2";
-
修改
package.json
里的命令javascript{ "scripts": { "dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve` "build": "vite build", // 为生产环境构建产物 "preview": "vite preview" // 本地预览生产构建产物 } }
-
项目根目录下,新建一个
vite.config.ts
javascript// vite.config.js import { defineConfig } from 'vite' import vue2 from "@vitejs/plugin-vue2"; export default defineConfig({ plugins: [ vue2(), ], })
-
还要新建一个
.env
的文件,用于存放process
的变量,这里的变量我是在 axios 拦截器里用的javascriptVITE_BASE_URL= "后端地址"
-
还要改一下项目根目录的
index.html
的入口文件,具体参考这个官方文档javascript<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wukong</title> <link rel="icon" href="/favicon.ico"> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
-
vite 运行之后会报错,是因为一些组件在引入的时候没有写
.vue
,添加extensions
到vite.config
里
javascriptresolve: { alias: { "@": path.resolve(__dirname, "src"), }, extensions: [".js", ".json", ".ts", ".jsx", ".tsx", ".vue"], // 添加 .vue 扩展名 },
-
... 大概就是这么多,肯定会遇到其他问题的,根据自己的项目改就好
切换完 vite 之后,node版本就可以切得高一点来试试了,我的是
v22.9.0
sass 终端提示报错(未解决)
这个原因是 sass
的问题,虽然给了配置字段,但是不好使,看着闹心的话暂时没啥办法,容我再研究研究
1. https://sass-lang.com/blog/import-is-deprecated/#built-in-functions
2. https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0