vue多环境配置

1 篇文章 0 订阅
1 篇文章 0 订阅

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,搞定

觉得小弟写的还不错的,记得点赞打赏,感激不尽
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值