每次打包上传代码都要来回切换不同环境的服务器地址,不仅麻烦,而且经常会弄混乱,导致线上出错。
一、在根目录创建.env文件
具体查看官方文档:模式和环境变量 | Vue CLI
1、开发环境(.env.development)
NODE_ENV = development
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = ''
2、测试环境(.env.test)
NODE_ENV = test
VUE_APP_API_URL = 'http://****'
VUE_APP_SERVER_URL = '/api'
3、正式环境(.env.production)
NODE_ENV = production
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = '/api'
二、修改config.js
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
// 打包后的目录
outputDir: process.env.outputDir,
// 配置代理服务
devServer: {
proxy: process.env.VUE_APP_API_URL,
}
})
三、配置运行方法(package.json)
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test", // 打包测试
"pro": "vue-cli-service build && vue-cli-service build --mode test" // 打包测试和线上
},
打包命令为:
test:npm run test