在项目开发一直到上线的过程中，我们一般会配置至少三个环境（开发环境 dev、测试环境 test、生产环境prod）

1.根目录下新建三个环境的配置文件，.env.development（开发环境）.env.test（测试环境）.evn.production（生产环境）

2、开发环境 .env.development

NODE_ENV = 'development'

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

#开发环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxxxxx:8081/

测试环境 .env.test

# 测试环境
NODE_ENV = 'test'

# 测试环境，api前缀
VUE_APP_BASE_API = '/test-api'

#测试环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxxx:8081/'

生产环境 .env.production

# 生产环境
NODE_ENV = 'production'

# 生产环境，api前缀
VUE_APP_BASE_API = '/prod-api'

#生产环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxxxxxxxx:8081/'

3、vue.config.js 配置

// webpack-dev-server 相关配置
    devServer: { // 设置代理
        host: '0.0.0.0', //
        port: 80, //自定义端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            [process.env.VUE_APP_BASE_API]: { 
                target: process.env.VUE_APP_BASE_RUL,
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true,
                pathRewrite: {   //重写路径，这种是没有我们定义的前缀
                    ['^' + process.env.VUE_APP_BASE_API]: '' 
                }
            }
        }
    },

4、package.json 配置打包、启动

"serve": "vue-cli-service serve",    //启动
"build:test": "vue-cli-service build --mode test",   //测试
"build:prod": "vue-cli-service buil

5、封装了axios的话，在axios配置的基地址里面就直接写上动态的地址就可以了

let request = axios.create({ 
        baseURL: process.env.VUE_APP_URL, 
        responseType: "json", 
        timeout: 60000,
    });

这里需要注意的是，在vue.config.js中配置了proxy跨域后执行npm run build打包部署到服务器上会报跨域问题。为什么会报错呢？因为编译打包后，前端页面成为了单独的静态资源，代理服务器devServer.proxy被抽离出去了。

也就是说，devServer.proxy不会一起打包到dist文件夹下，所以相当于我们没有配置代理服务器！！

怎么解决呢？资源要被访问，那必须要有一个代理服务器来装载它。我们部署上线最常见的就是使用nginx进行反向代理，只需要修改nginx配置文件即可。

location ^~/api/ {
     proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
}