vue-cli3.0配置开发环境与生产环境变量

第一步:在根目录创建两个文件,文件名分别为 .env.development和.env.production
vue-cli3.0配置开发环境与生产环境变量_第1张图片
第二步:分别编辑这两个文件
在不同的环境下设置不同的环境变量
.env.development,这是开发环境下的URL

VUE_APP_URL_DEVELOPMENT = 'https://www.baidu.com'

.env.production,这是生产环境下的URL

VUE_APP_URL_PRODUCTION = 'https://www.taobao.com'

第三步:设置不同环境的打包指令
package.json文件
vue-cli3.0配置开发环境与生产环境变量_第2张图片
build 默认生产环境 ,build-dev已设置为开发环境
第四步:设置axios请求基地址

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_URL_PRODUCTION : process.env.VUE_APP_URL_DEVELOPMENT

注意:配置环境变量时,环境变量名要以VUE_APP开头

你可能感兴趣的:(Vue)