- 在根目录下新建.env.test(测试环境)、env.development(开发环境)、.env.production文件(生产环境)
- 三个配置文件的配置内容如下:
- .env.test(测试环境)配置内容
NODE_ENV = 'production'//用来表示是生产环境还是开发环境
VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境
VUE_APP_BASE_URL = http://ai.galaxyspaceai.com:18001/knowledge-graph-java/api //这个地址不能带引号,不然获取的就带引号
outputDir = test//用来表示打包的名字
- .env.development(开发环境)配置内容
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = http://192.168.50.13:10025/knowledge-graph-java/api
- .env.production文件(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = http://ai.galaxyspaceai.com:18001/knowledge-graph-java/api
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test",//新添加,打包时,打包test环境
"production": "vue-cli-service build --mode production",//新添加,打包时,打包production环境
"development": "vue-cli-service build --mode development"//新添加,打包时,打包development环境
},
module.exports = {
// 基本路径,相对路径
publicPath: "./",
// 输出文件目录
outputDir: process.env.outputDir,//使用定义的名字
}
- 在文件中可以使用
console.log(process.env.VUE_APP_BASE_URL);
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 50000,
headers: {
'Content-Type': 'application/json'
},
})
// 第一层if判断生产环境和开发环境
if (process.env.NODE_ENV === 'production') {
// 第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
if (process.env.VUE_APP_FLAG === 'pro') {
//production 生产环境
} else {
//test 测试环境
}
} else {
//dev 开发环境
}