vue|vue多环境配置 env|vue|多环境

【vue|vue多环境配置】1.首先替换你的项目根目录中的下列文件来指定环境变量：

.env# 在所有的环境中被载入 .env.local# 在所有的环境中被载入，但会被 git 忽略 .env.[mode]# 只在指定的模式中被载入 .env.[mode].local# 只在指定的模式中被载入，但会被 git 忽略

注：如果有就替换掉，如果没有就新建，[mode]代表变量，.local会被git忽略
附：这里是我项目配置的三个环境配置

文章图片

一个环境文件只包含环境变量的“键=值”对：

NODE_ENV = 'test' NODE_ENV = 'development' NODE_ENV = 'production'

注：为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV
2.然后在package.json中配置不同环境的打包命令：
附我的打包命令代码：build为默认打包命令，这里我圈起来的就是我们刚才配置的不同环境的打包命令

文章图片

重点：–mode 选项参数为命令行覆写默认的模式，例如，如果你想要在构建命令中使用开发环境变量就要加上–mode
3.然后开始配置不同环境对应不同的请求前缀，也就是不同的域名或者ip地址，一般这个文件是放在config文件夹中你随便创建一个js文件
附我的不同环境下的域名（这里的域名我随便写的，baseurl = ‘这里写你的请求地址’）

文章图片

4.然后在你的请求js文件中使用baseUrl，附我的request.js

文章图片

然后你就可以打包不同的环境了
记得先安装依赖（安装依赖方法：在你的终端里写cnpm i，然后回车，等安装完就OK了，如果你运行cnpm i报错了，就在终端里执行npm install -g cnpm --registry=https://registry.npm.taobao.org，然后再安装依赖）
例如我的代码现在的打包命令就是： npm run test / npm run dev / npm run prod（三个环境选择一个你需要的进行打包）——>cd dist ——> http-server，搞定
觉得小弟写的还不错的，记得点赞打赏，感激不尽