下面我将介绍三种环境的baseUrl配置
开发环境、测试环境以及生产环境
在vue-cli3中，npm run serve时会把process.env.NODE_ENV设置为‘development’；
npm run build时会把process.env.NODE_ENV设置为‘production’；
因而，接下来我们要设置一个测试环境的process.env.NODE_ENV
--------------------
1、首先在package.json中设置ceshi,代码如下："ceshi":"vue-cli-service build --mode ceshi"
2、在根目录下新建 .env.ceshi文件，内容如下：
NODE_ENV = 'ceshi'
3、新建baseUrl.js,添加内容如下：
let baseUrl= ""; //这里是一个默认的url，可以没有
switch (process.env.NODE_ENV) {
case 'development':
baseUrl = "http://localhost:3000/" //开发环境url
break
case 'ceshi': // 注意这里的名字要和步骤二中设置的环境名字对应起来
baseUrl = "http://localhost:3000/" //测试环境中的url
break
case 'production':
baseUrl = "http://106.13.94.82:3000" //生产环境url
break
}
export default baseUrl;
4、axios中引入文件并使用
import axios from 'axios';
import baseUrl from './baseUrl '
let instance = axios.create({
baseURL: baseUrl,
timeout: 5000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
transformRequest: [function (data) {
return data;
}],
transformResponse: [function (data) {
return data
}],
auth: {},
responseType: 'json',
maxContentLength: 5000,
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// showMessage:false
})
现在使用npm run serve就是开发环境的url npm run build就是生产环境的url npm run ceshi就是测试环境的url
网友评论