背景
在使用vue-cli搭建vue項目的時候，由于3.0比起2.x精簡了許多配置文件，所以需要自己手動配置相關的配置文件，即在根目錄下新建一個vue.config.js，并在其中配置相關選項
PS:
- vue-cli2.x版本搭建項目使用的命令是
vue init webpack test1,test1是項目名 - vue-cli3.0版本搭建項目使用的命令是
vue create test2,test2是文件名
問題描述
這兩天幫同學寫前端界面，因為剛開始是在局域網中調用接口，但是之后部署到阿里云后要調用另一個域名下的接口，然后在webpack-dev-server再修改其參數的時候，明明其他配置沒有變，只是改了url就會出現各種錯誤：“500”、“跨域”、“巴拉巴拉……”，但是postman測試接口都沒有問題，所以被折磨了一下午，不堪其辱的我！終于決定要好好看看這個 webpack-dev-server配置！
配置歸納
整個config配置
下面是我項目整個config的配置(好多都是默認的)
module.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// webpack配置
chainWebpack: () => { },
configureWebpack: () => { },
// 生產環境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
parallel: require('os').cpus().length > 1,
pwa: {},
// webpack-dev-server 相關配置
devServer: {
open: true, //配置自動啟動瀏覽器
host: 'localhost',
port: 8080, // 端口號
https: false,
hotOnly: false, // https:{type:Boolean}
proxy: { // 配置跨域
'/api':{
target:'http://xxx.xx.xxx.xxx:8080', //源地址
changeOrigin:true, //改變源
ws:true, //是否代理websockets
pathRewrite:{
'^/api':''
}
}
}, // 配置跨域處理,只有一個代理
before: app => { }
},
// 第三方插件配置
pluginOptions: {}
}
webpack-dev-server的配置
- open:項目通過
npm run serve編譯好后是否自動打開項目網站 - host:這個東西就很有講究了：網上好多都是配置為
host: '0.0.0.0',如果將其設置為host: '（本機IP地址）',host: 'localhost',都能正常請求到數據。
而他們的區別在于：
host: '0.0.0.0':你既可以在本地用http://localhost/yoursite的url訪問項目，也可以用http://xxx.xx.xxx.xxx/yoursite訪問項目。其中xxx.xx.xxx.xxx是你的本機IP。
比如你的計算機IP地址是123.45.67.89，項目名稱是app，那么你的訪問url就可以是http://localhost/app，或者http://123.45.67.89/app
這樣設置的好處是，當你想用非本機訪問項目進行測試時，由ip地址構建的url可以對項目進行訪問，同時本地還可以用localhost進行訪問host: '123.45.67.89': 如果將IP寫死了，那么只有這個'123.45.67.89'IP才可以訪問調用接口數據，那么localhost就無法訪問了（除非localhost就是這個IP）
- proxy:設置代理
因為瀏覽器的同源策略，調用不同域的資源就會產生跨域的問題，所以需要設置代理配置跨域，才能正常請求到其他域下的資源
設置代理, 首先得有一個標識, 確認哪一個連接要用代理. 不然的話, html, css, js這些靜態資源都使用代理的網址調用. 所以只有需要調用的接口用代理, 靜態文件用本地.
-
'/api':{}：接口只要是'api'開頭的才用代理.這個'api'即標識 -
target:源地址，即請求接口的url前綴，如果我的接口都在http://xxx.xx.com下，那么源地址就是http://xxx.xx.com -
changeOrigin:是否允許跨域 -
ws:是否代理websockets -
pathRewrite:{'^/api':''}:顧名思義，這是 ' 路徑重寫 ’ 的意思
當設置了標識符后，接口調用就要這么寫 :/api/delete?id=123，最后請求的路徑就是 http://xxx.xx.com/api/delete?id=123.但是如果正確的接口路徑里面沒有/api. 所以就需要pathRewrite,用'^/api':'', 把'/api'用空字符代替,最后請求的路徑就是http://xxx.xx.com/delete?id=123了.這樣既能有正確標識, 又能在請求接口的時候去掉api.
同理,proxy配置多個代理,使用不同對象進行分開配置:
proxy: { // 配置多個代理
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
……
},
'/foo': {
target: '<other_url>'
……
}
},
