web前端

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

2019-04-25  本文已影响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()。

上一篇 下一篇

猜你喜欢

热点阅读