方案一：?配置文件

文件內容

# 開發(fā)環(huán)境
NODE_ENV = 'development'
# base api
VUE_APP_BASE_API = '/api'
# 開發(fā)環(huán)境，Url地址
VUE_APP_URL = 'https://localhost:44367/api'

三個文件分別是三個不同環(huán)境使用的，如線上，線上測試，本地測試。我在本地測試時三個文件都配置成了一樣。

?vue.config.js?配置文件

const path = require('path');

const resolve = dir => {
    return path.join(__dirname, dir);
};
const env = process.env.NODE_ENV;
console.info('env: ------>', env, 'api:------>', process.env.VUE_APP_URL,'VUE_APP_BASE_API:-->',process.env.VUE_APP_BASE_API);

module.exports = {
   // mode: 'production',
   publicPath: process.env.NODE_ENV === 'production' ? './' : './',    // 啟動頁地址
   // publicPath: './',    // 啟動頁地址
   outputDir: "dist", // 打包的目錄
   indexPath: 'index.html', // 生成html文件名
   assetsDir: 'static', // 靜態(tài)資源文件目錄
   runtimeCompiler: true,
   lintOnSave: false, // 在保存時校驗格式
   productionSourceMap: false, // 生產環(huán)境是否生成 SourceMap
   /*
   chainWebpack: config => {
       // 修復熱更新
       config.resolve.symlinks(true);
   },
   */

    devServer: {
        /*1.測試成功 配合配置文件使用 VUE_APP_URL = 'https://localhost:44367/api'*/
        proxy: {
            [process.env.VUE_APP_BASE_API]: {// api 表示攔截以 /api開頭的請求路徑
                target: process.env.VUE_APP_URL,//跨域的域名（不需要寫路徑）
                changeOrigin: true,             //是否開啟跨域
                ws: true,                       //是否代理websocked
                pathRewrite: {                  //重寫路徑
                    ['^' + process.env.VUE_APP_BASE_API]: ''//把 /api 變?yōu)榭兆址?                }
            },
        },         
        /*2.測試成功 配置寫死 target 不帶/api，注意沒有pathRewrite屬性,調用接口時這么寫 api/User/gettest*/
        /* port: 8088,
        proxy: {
            '/api': {// api 表示攔截以 /api開頭的請求路徑
                target : 'https://localhost:44367',//跨域的域名（不需要寫路徑）process.env.VUE_APP_URL
                changeOrigin : true,             //是否開啟跨域
                ws: true,                     //是否代理websocked
            },
        },  
        /*3.測試成功  配置寫死 target 帶/api，注意要加pathRewrite屬性,調用接口時這么寫 api/User/gettest*/
        /*
        proxy: {
            '/api': {// api 表示攔截以 /api開頭的請求路徑
                target : 'https://localhost:44367/api',//跨域的域名（不需要寫路徑）process.env.VUE_APP_URL
                changeOrigin : true,             //是否開啟跨域
                ws: true,                        //是否代理websocked
                pathRewrite : {                  //重寫路徑
                    '^/api' : ''                 //把 /api 變?yōu)榭兆址?                }
            },
        }, */
    }
}

問題：

控制臺顯示 400 (Bad Request)或404等問題都是?vue.config.js?配置文件?的?proxy?的配置問題。

主要檢查點是??target?里沒有帶 /api 和??pathRewrite?屬性的問題。

如果使用配置文件要檢查?

VUE_APP_BASE_API = '/api' 這里要小心，要注意有沒有帶 /

VUE_APP_URL = 'https://localhost:44367/api' 這里也要檢查要和vue.config.js?配置文件里的代碼配合使用。

END文章來源地址http://www.zghlxwxcb.cn/news/detail-840026.html

到了這里，關于vue.config.js 配置proxy代理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！