vue-cli3.0代理和环境变量

在根目录下创建 vue.config.js 文件

配置代理

module.exports = {
    devServer: {
        port: 9999,                                     // 配置端口
        proxy: {
            '/api': {
                target: 'http://192.168.2.89:7001/',    // 目标 API 地址
                ws: true,                               // 是否代理 websockets
                changOrigin: true,                      // 跨域配置
                pathRewrite: {                          
                    '^/api': '/'
                }
            }
        }
    },
    lintOnSave: false                                   // 取消 eslint 验证
};

配置环境变量

在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

1. 在根目录新建 .env(配置) 文件

# 反向代理配置
VUE_APP_API_SERVER = http://192.168.2.89:7001/

2. 更改vue.config.js 配置

module.exports = {
    devServer: {
        port: 9999,                                     // 配置端口
        proxy: {
            '/api': {
                target: process.env.VUE_APP_API_SERVER,    // 目标 API 地址
                ws: true,                               // 是否代理 websockets
                changOrigin: true,                      // 跨域配置
                pathRewrite: {                          
                    '^/api': '/'
                }
            }
        }
    },
    lintOnSave: false                                   // 取消 eslint 验证
};

process官方给出的解释是：process 对象是一个全局变量，它提供有关当前 Node.js 进程的信息并对其进行控制。 作为一个全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。