快捷導(dǎo)航

vue/cli?配置動(dòng)態(tài)代理無(wú)需重啟服務(wù)的操作方法

更新時(shí)間：2022年05月20日 15:24:36 作者：野豬佩奇丶丶

vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，分為vue?init?webpack-simple?項(xiàng)目名和vue?init?webpack?項(xiàng)目名兩種，這篇文章主要介紹了vue/cli?配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù),需要的朋友可以參考下

vue腳手架指的是vue-cli，它是一個(gè)專(zhuān)門(mén)為單頁(yè)面應(yīng)用快速搭建繁雜的腳手架，它可以輕松的創(chuàng)建新的應(yīng)用程序而且可用于自動(dòng)生成vue和webpack的項(xiàng)目模板。

vue/cli 配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù)

devServe = http://localhost:3000;
prodServe = http://localhost:4000;

1. 在vue.config.js文件中，配置代理服務(wù)

使用vue/cli@5創(chuàng)建的項(xiàng)目，默認(rèn)會(huì)創(chuàng)建vue.config.js文件，如果項(xiàng)目中沒(méi)有此文件，那么就手動(dòng)在項(xiàng)目根路徑創(chuàng)建vue.config.js文件。

const { defineConfig } = require('@vue/cli-service');
const createProxy = require('./dynamic_proxy');

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            '/': {
                target: '',
                ws: false,
                changeOrigin: true,
                router: () => {
                    return createProxy();
                }
            }
        }
    }
});

2. 在項(xiàng)目根路徑創(chuàng)建文件夾`dynamic_proxy`，并創(chuàng)建`proxy.list.json`文件以及`index.js`文件。

proxy.list.json

[
    {
        "name": "devServe",
        "ip": "http://xxx.xxx.xxx.xxx:3001",
        "active": true
    },
    {
        "name": "prodServe",
        "ip": "http://xxx.xxx.xxx.xxx:3000",
        "active": false
    }
]

index.js

const { readFileSync } = require('fs');
const { resolve } = require('path');
const getProxyList = () => {
    try {
        const proxyList = readFileSync(resolve(__dirname, './proxy.list.json'), 'utf-8');
        return JSON.parse(proxyList);
    } catch (error) {
        throw new Error(error);
    }
};
const getActiveProxy = () => {
    try {
        const proxyList = getProxyList();
        if (proxyList.some(i => i.active)) {
            return proxyList.find(i => i.active);
        }
    } catch (error) {
        throw new Error(error);
    }
};
module.exports = () => {
    return getActiveProxy().ip;
};

3. 運(yùn)行命令

npm run serve

4. 需要切換服務(wù)時(shí)，直接修改`proxy.list.json`中的`active`選項(xiàng)，修改為`true`,就可以自動(dòng)切換了

5. 原理解析

vue cli 的代理是使用的http-proxy-middleware包，所以proxy選項(xiàng)的配置也是基于這個(gè)包的配置。在proxy配置選項(xiàng)中有兩個(gè)屬性target以及router。其中target是默認(rèn)的代理地址。而router可以return一個(gè)字符串服務(wù)地址，那么當(dāng)兩個(gè)選項(xiàng)都配置了時(shí)，http-proxy-middleware在解析配置時(shí)，會(huì)首先使用router函數(shù)的返回值，當(dāng)router的返回值不可以用時(shí)，那么就會(huì)fallback至target。

http-proxy-middleware router配置源碼

配置校驗(yàn)源碼

可以由上面源碼看出首先會(huì)校驗(yàn)配置，如果target和router都不存在的話(huà)，就會(huì)直接Error，從第一張圖片源碼可以看出，如果router存在的話(huà)，則會(huì)直接新建一個(gè)newTarget，并且將options.target賦值為newTarget；

到此這篇關(guān)于vue/cli 配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù)的文章就介紹到這了,更多相關(guān)vue cli 配置動(dòng)態(tài)代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: