天殺的 vue cli 4 篷店。一晚上就弄這個了~~~~。之前的錯誤版該說的都說了臭家，這次直接貼正確代碼乓旗。不過有幾點(diǎn)要先說。
1.首先格二，不懂的一定要先看vue.config.js配置的官網(wǎng)：https://cli.vuejs.org/zh/config/#devserver-proxy
2.之前在vue cli 2中歪沃，顯示mooc和打印mooc都是在vue組件中寫的，但是現(xiàn)在是直接在這個配置文件中寫橄霉。
3.還有一些話寫在了代碼里
vue只看關(guān)鍵部分
methods:{
getHomeInfo(){
//首先 訪問8080窃爷， axios去請求這么一個路徑
//接下來，這個路徑會到 vue.config.js中
axios.get("/api/index.json").then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res){
//這里可以在控制臺中打印
console.log(res)
}
},
mounted(){
this.getHomeInfo()
}
接下來是重頭戲：vue.config.js
const path = require('path');
const mockdata=require("./mock/index.json")
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('styles',resolve('src/assets/styles'))
// 這里只寫了兩個個姓蜂，你可以自己再加按厘，按這種格式.set('', resolve(''))
},
devServer:{
//當(dāng)Home.vue中的路徑過來時，/api/index.json 因為是api開頭钱慢，
//所以這個路徑被跨域到 http://localhost:8080/mock/index.json
//即實(shí)際上訪問8080時逮京，訪問的是http://localhost:8080/mock/index.json
//這樣就拿到了mooc的數(shù)據(jù)。
//拿到之后束莫，就回到vue開始執(zhí)行then懒棉。
//到此結(jié)束！＠缆獭２哐稀！
proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite:{
'^/api':'/mock'
}
},
'/foo': {
target: 'http://localhost:8080'
}
},
//用來顯示假數(shù)據(jù)饿敲，即如果直接訪問 http://localhost:8080/api/index.json
//就會在頁面打印mock數(shù)據(jù)
port:8080,
before(app){
app.get('/api/index.json',(req,res,next)=>{
res.json(mockdata)
})
}
}
};
