vue相关环境配置
1.序言
vue开发时安装的不同环境配置,方便更换设备时进行当前版本的固定化。
2. 版本查询
//版本查询
nvm -> nvm -v --> 1.1.8
node -> node -v --> 14.17.5
cnpm -> cnpm -v --> 7.1.1
yarn -> yarn -v --> 14.17.5
node-sass -> node-sass -v --> 4.14.1
http-server -> http-server -v --> 14.1.0
vue -> vue -V --> 4.5.15
webpack-cli -> webpack-cli -v --> 4.9.2
3. NVM相关
介绍nvm管理node版本,因为node版本上下版本不兼容,采用nvm进行对node管理方便切换。
3.1 nvm的node切换与安装
// nvm的路径
nvm root
// nvm切换node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install xxx 先下载想用的版本
nvm use <version> ## 切换使用指定的版本node
3.2 nvm的node配置
// nvm的node配置
// 在nvm下载的版本node的根目录下,创建node_global和node_cache
npm config ls 查看当前的node配置路径
npm config set prefix "D:\xxx\node_global"
npm config set cache "D:\xxx\node_cache"
3.2 nvm切换node后对本地的环境修改配置
<------------ 引用(3.1 nvm的node切换与安装) start --------------------------->
// nvm的路径
nvm root
// nvm切换node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install xxx 先下载想用的版本
nvm use <version> ## 切换使用指定的版本node
<------------ 引用(3.1 nvm的node切换与安装) end ----------------------------->
// 环境配置
- npm config ls 查看当前的node配置路径
// 修改配置路径
npm config set prefix "D:\runTimeEnvironment\nvm\v10.13.0\node_global"
npm config set cache "D:\runTimeEnvironment\nvm\v10.13.0\node_cache"
nvm use 10.13.0
// 例如:
// v14.17.5版本
npm config set prefix "D:\runTimeEnvironment\nvm\v14.17.5\node_global"
npm config set cache "D:\runTimeEnvironment\nvm\v14.17.5\node_cache"
// v10.14.0版本
npm config set prefix "D:\runTimeEnvironment\nvm\v10.14.0\node_global"
npm config set cache "D:\runTimeEnvironment\nvm\v10.14.0\node_cache"
// v18.16.0版本
npm config set prefix "D:\runTimeEnvironment\nvm\v18.16.0\node_global"
npm config set cache "D:\runTimeEnvironment\nvm\v18.16.0\node_cache"
// 配置电脑环境
修改 NODE_USE_PATH 配置到指定版本的目录,在电脑的环境变量配置里进行配置
4. npm中cnpm的设置
//建议使用淘宝镜像
//下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看当前镜像地址: npm get registry
切换为淘宝镜像: npm config set registry http://registry.npm.taobao.org/
切换为原本的npm镜像: npm config set registry https://registry.npmjs.org/
5. vue项目启动
// 项目启动
npm run dev
npm run server
// 其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写,npm run XXX是执行配置在 package.json 中的脚本,比如
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
5. vue项目启动问题
遇见的问题:类似权限
方案1、
由于报错是 The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus),本能的想法就是权限不够,所以直接使用管理员权限打开了命令行然后执行 npm install命令,结果并不能解决我的问题,但是不代表不能解决你的问题,所以可以先行尝试。
方案2、
通过网上查找资料,发现删除本机电脑用户目录下的.npmrc文件,可以解决当前问题,于是进行了尝试,果然解决了问题,文件 具体路径为 C:\Users\{当前登录的用户名}\.npmrc。
6. 具体的环境安装环境变量配置
正在更新中。。。