vue中代理實現方法

vue中代理實現方法如下：

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 項目的主要配置文件
module.exports = {
    publicPath: '', //不用打包后放置的路徑
    outputDir: "groupcode", //打包后的文件夾名字
    chainWebpack: (config) => {
        //修改文件引入自定義路徑
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
        proxy: { //目的是解決跨域，若測試環境不需要跨域，則不需要進行該配置
            '/api2_1': {
                // 目標 API 地址
                target: 'https://api.taotiangou.cn/api2_1',
                // 如果要代理 websockets
                ws: true,
                // 將主機標頭的原點更改為目標URL
                changeOrigin: true,
                pathRewrite: {
                    '^/api2_1': ''
                }
            },
            '/common': {
                // 目標 API 地址
                target: 'https://api.taotiangou.cn/common',
                // 如果要代理 websockets
                ws: true,
                // 將主機標頭的原點更改為目標URL
                changeOrigin: true,
                pathRewrite: {
                    '^/common': ''
                }
            }
        }
    },
}

通過查看devServer的配置，我們發現，我們可以設置多個代理。設置代理遵循以下幾個原則：

1、代理的字段為api接口路徑的一部分。

2、代理的字段一般選取api接口最后一個相同的字段。