在根目錄下創(chuàng)建 vue.config.js 文件

配置代理

module.exports = {
    devServer: {
        port: 9999,                                     // 配置端口
        proxy: {
            '/api': {
                target: 'http://192.168.2.89:7001/',    // 目標(biāo) API 地址
                ws: true,                               // 是否代理 websockets
                changOrigin: true,                      // 跨域配置
                pathRewrite: {                          
                    '^/api': '/'
                }
            }
        }
    },
    lintOnSave: false                                   // 取消 eslint 驗(yàn)證
};

配置環(huán)境變量

在一個(gè)產(chǎn)品的前端開(kāi)發(fā)過(guò)程中，一般來(lái)說(shuō)會(huì)經(jīng)歷本地開(kāi)發(fā)、測(cè)試腳本、開(kāi)發(fā)自測(cè)、測(cè)試環(huán)境、預(yù)上線(xiàn)環(huán)境，然后才能正式的發(fā)布。對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異，比如說(shuō)服務(wù)器地址、接口地址、websorket地址…… 等等。在各個(gè)環(huán)境切換的時(shí)候，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式，來(lái)方便我們管理。

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,    // 目標(biāo) API 地址
                ws: true,                               // 是否代理 websockets
                changOrigin: true,                      // 跨域配置
                pathRewrite: {                          
                    '^/api': '/'
                }
            }
        }
    },
    lintOnSave: false                                   // 取消 eslint 驗(yàn)證
};

process官方給出的解釋是：process 對(duì)象是一個(gè)全局變量，它提供有關(guān)當(dāng)前 Node.js 進(jìn)程的信息并對(duì)其進(jìn)行控制。 作為一個(gè)全局變量，它始終可供 Node.js 應(yīng)用程序使用，無(wú)需使用 require()。