vue-cli3的本地代理配置

 

2019.01.04 19:48 6097瀏覽

 

為什么需要請求代理呢？
按照我的理解就是因為現在開發都是前后端分離，所以開發都不是在同一台主機上的，所以當我們需要再開發環境中請求API，需要服務器的API代理到本地(原理是什么呢？是如何代理過來的呢？有待下一篇文章進行探討，暫時不去理會了)。
這個問題實際上vue-cli3已經有解決方案了，就是通過vue.config.js這個配置文件中的devServer.proxy這個對象進行配置，其中devServer.proxy指向一個開發環境下的服務器API地址，如下配置：

module.export = {
	devServer: {
		proxy:"http://localhost:8080"
	}
}

這段配置，將會告知無論請求任何資源，如果找不到資源文件，將代理到以下服務器路徑
http://localhost:8080
我在開發我的開源項目的時候，遇到一個代理的需求，
我目前配置如下：

module.exports = {
    baseUrl : "./",//配置打包時的相對路徑
    devServer: {
        port: "8081",//代理端口
        open: false,//項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開
        proxy: {
            '/admin': {//代理api
                target: "http://localhost:8080/account/admin",// 代理接口
                changeOrigin: true,//是否跨域
                ws: true, // proxy websockets
                pathRewrite: {//重寫路徑
                    "^/admin": ''//代理路徑
                }
            }
        }
    }
}

如果你想學習一下全面的配置可以參考這個鏈接
如果你想要更多的代理控制行為，也可以使用一個path: options成對的對象。完整的選項可以查閱
proxycontext-config

順帶扯扯baseUrl的配置吧
baseUrl

部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個值，所以請始終使用 baseUrl 而不要直接修改 webpack 的 output.publicPath。
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，
例如 https://www.my-app.com/。
如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。
例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設置 baseUrl 為 /my-app/。
這個值也可以被設置為空字符串 (’’) 或是相對路徑 (’./’)，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的文件系統中。
相對 baseUrl 的限制
相對路徑的 baseUrl 有一些使用上的限制。在以下情況下，應當避免使用相對 baseUrl:

當使用基於 HTML5 history.pushState 的路由時；
當使用 pages 選項構建多頁面應用時。

這個值在開發環境下同樣生效。如果你想把開發服務器架設在根路徑，你可以使用一個條件式的值：

module.exports = {
	baseUrl: process.env.NODE_ENV === 'production'? "/account/admin/":"/"	
}