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