vue-cli4.0配置项目的不同环境域名
用 test、preview、production分别表示测试,预览,生产三种环境
修改 package.json 文件如下
“scripts”: {
“serve”: “vue-cli-service serve”,
“test”: “vue-cli-service build --mode test”, //测试
“preview”: “vue-cli-service build --mode preview”, //预览
“build”: “vue-cli-service build --mode production”, //生产
“lint”: “vue-cli-service lint”
},
在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应
.env.test 代码如下
NODE_ENV=“test”
VUE_APP_BASE_URL=“测试环境域名”
.env.pre 代码如下
NODE_ENV=“preview”
VUE_APP_BASE_URL=“预览环境域名”
.env.prod 代码如下
NODE_ENV=“production”
VUE_APP_BASE_URL=“生产环境域名”
ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了
npm run test //测试
npm run pre //预发布
npm run prod //生产
另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置
所以记得有需要记得新建一个然后存放配置
我的 .env.development 代码如下
NODE_ENV=“development”
VUE_APP_BASE_URL=“本地环境域名”
若在开发时使用了跨域代理,可以在main.js中增加判断,自动切换接口请求的域名
if (process.env.NODE_ENV ==='production'||process.env.NODE_ENV === 'test') {//生产环境,测试环境 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; } else { //serve 开发环境 // axios.defaults.baseURL = '/api'; }
原文地址:https://www.cnblogs.com/xiaoliang-/p/12928941.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法