第四课 配置开发环境与生产环境变量

一、在路径上新建2个文件，名字不要写错

1）.env.development 开发环境
2）.env.production  生产环境
3）.env.test        测试环境

二、修改开发环境.env.development文件

需要注意的是变量名必须以VUE_APP开头

# 接口服务器地址
VUE_APP_SERVER_URL = 'http://localhost:8090'

# 开发环境路径前缀
VUE_APP_BASE_API = '/api'

三、修改vue.config.js

proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target:process.env.VUE_APP_SERVER_URL,
        changeOrigin:true,
        pathRewrite:{
          ['^'+process.env.VUE_APP_BASE_API]:''
        }
      }
    } 

四、修改test.js

把所有地方都换成动态的变量

import myaxios from '../utils/myaxios'
const BASE_URL = [process.env.VUE_APP_BASE_API]
export default{
    getList(){
        const promise1 = myaxios({
            method:'get',
            url:BASE_URL+'/data.json'
        })
        return promise1
    }
}

五、修改生产环境.env.production文件

生产环境，需要在Nginx配置

# 开发环境路径前缀
VUE_APP_BASE_API = '/prod-api'

修改myaxios.js文件

const myaxios = axios.create({
    baseURL:process.env.VUE_APP_BASE_API,
    timeout:5000
})

修改test.js

把BASE_URL变量删除，因为在myaxios已经把前缀加入了

import myaxios from '../utils/myaxios'
export default{
    getList(){
        const promise1 = myaxios({
            method:'get',
            url:'/data.json'
        })
        return promise1
    }
}

以后开发环境修改只需要在.env.development文件中修改

六 修改生产环境.env.test文件以及package.json

1. .env.test

# 接口服务器地址
VUE_APP_SERVER_URL = 'http://localhost:9999/'

# 开发环境路径前缀
VUE_APP_BASE_API = '/api'

2. package.json

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service serve --mode test"
  },

环境模式切换 vue-cli-service serve --mode 环境名

3)如果想切换到测试环境的变量

    终端：npm run test