【记录57】如何使环境同时兼容vue2/3

文章出处：笔者在保证vue2项目的环境下，要创建vue3项目，大家都知道，vue2是基于javascript，vue3是基于typescript，为了保证项目环境之间兼容，进行了一下升级更新，在描述配置前，先给大家说下node、npm、vite(vue3)、vue cli（vue2）

vue npm node vite vue cli vue2 >=6.x 所有 / 3.x，4.x vue3 >=6.x 18.x推荐，20.x 4.x，5.x推荐 /

常规：都选较新且稳定的版本，不然很容易引起兼容性问题。
/
node推荐18.x是因为其对vite、vue cli 兼容性更好，社区生态支持完善，适合大多数项目，也是官方推荐的稳定版本。
/
如果想要同时兼容vue2和vue3，查阅资料推荐node版本为16.x和18.x，为啥不选16.x是因为其2023年底官方已停止维护。就像现在大家开始用vue3，vue2用的人数在减少，时代发展的步骤，是向前走，不可能留在原地。
/
如果同时满足兼容vue2和vue3，npm版本应为8.x 或9.x属于较新且稳定的版本，更好的支持现代前端工程化工具，官方推荐。

一、检查环境

注释：

1. 官网直接下载对应版本，找到旧的node安装文件，直接解压进去覆盖掉即可；笔者做法
2. npm install -g n，接着 n ls或n

二、基于vite创建项目及项目配置

来源 路径 官方镜像 https://registry.npmjs.org 淘宝镜像 http://registry.npmmirror.com 阿里云镜像 https://npm.aliyun.com 腾讯云镜像 https://mirrors.cloud.tencent.com/npm 华为云镜像 https://mirrors.huaweicloud.com/repository/npm 网易镜像 https://mirrors.163.com/npm

三、建立终端

打开vscode，打开文件夹，选择项目，建立终端

四、下载文件

npm install -D sass-embedded
打开文件根目录下看不到node_modules文件，该命令执行完就可以看到node_modules文件了，下载时间根据自己的网速，有的需要1分钟，笔者下载花费10分钟

另一位博主安装、配置教程

五、运行

npm run dev

运行报错

是版本兼容性问题
npm show vite version 查看vite版本
结果是7.0.6，推荐5.0.0或4.0.0，笔者推荐5.0.0

修改vite版本

找到文件中package.json中vite
7.0.0 改成5.0.0
npm install -D sass-embedded
再运行就好了

运行正常