正式项目开发的时候环境不止一个所以自带脚本就不满足了，这里记录一下环境配置
项目根目录下新建.env.devBuild、.env.development、.env.production
.env.devBuild
NODE_ENV = 'production'
VUE_APP_API_URL_WEB='测试环境地址'
.env.development
NODE_ENV = 'development'
VUE_APP_API_URL_WEB='测试环境地址
.env.production
NODE_ENV = 'production'
VUE_APP_API_URL_WEB='正式环境地址'
接口请求配置新建env.js，然后配置axios.defaults.baseURL就好了
env.js
let baseUrl = ''; //这里是一个默认的url，可以没有
// eslint-disable-next-line no-undef
switch (process.env.NODE_ENV) {
case 'development':
// eslint-disable-next-line no-undef
baseUrl = '/'; //这里是本地测试的url,这里我是配了proxy
break;
case 'devBuild':
// eslint-disable-next-line no-undef
baseUrl = process.env.VUE_APP_API_URL_WEB; //这里是打包到测试环境中的url
break;
case 'production':
// eslint-disable-next-line no-undef
baseUrl = process.env.VUE_APP_API_URL_WEB; //是打包到生产环境url
break;
}
export default baseUrl;
部分axios.js代码
import baseUrl from './env';
axios.defaults.baseURL = baseUrl;
export default axios;
package.json添加代码
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"devBuild": "vue-cli-service build --mode devBuild"
},
打包到测试环境使用命令行 npm run devBuild,打包到正式环境就还是 npm run build
项目目录
注意事项：
.env.devBuild文件.env.后面的名字可以自己定义，不过要和package.json文件中的vue-cli-service build --mode接的关键字一致。NODE_ENV = 'production'代表打包到生产环境，NODE_ENV = 'development'代表调试环境不要用于打包
