- 通过vuecli脚手架创建的项目如果需要增加配置,就自己在项目根目录下建立文件vue.config.js 其他内容和webpack中webpack.config.js写的配置一样正常写.
- 若需要跨域请求数据时需要自己写配置 即开启代理
module.exports = {
devServer : {
proxy : {//译代理
"/app":{
target: " http://localhost:3000", //写访问的地址
ws: true, //如果要代理 websockets,配置这个参数
changeOrigin: true, //允许跨域
pathRewrite: {//译改写路径即重写 /app相当于变量 将地址赋予给变量
"^/app": "http://localhost:3000"//和target后的地址必须一致
}
}
}
}
}
- 使用的时候用/app代替(类似变量),然后这样就可以了。
'/app/top/list?idx=3' 等效于 'http://localhost:3000/top/list?idx=3'
this.axios.get('/app/top/list?idx=3').then(res=>{
this.crunchiesList1 = res.data.playlist;
})
- 平时如果域名相同 又不想多次重复写域名,就可以这样配置,类似配置根域名效果,但是获取数据使用时必须要写配置的变量 不然还是会从webpack默认设置服务器下获取数据。
- 若想配置多个代理也可以,proxy是个对象继续写就行,/app是自己取名的可以任意命名(/必须要)
多个代理示例:
module.exports = {
devServer : {
proxy : {//译代理
"/app":{
target: " http://localhost:3000", //写访问的地址
ws: true, //如果要代理 websockets,配置这个参数
changeOrigin: true, //允许跨域
pathRewrite: {//译改写路径即重写 /app相当于变量 将地址赋予给变量
"^/app": "http://localhost:3000"
}
},
"/api":{
target: " http://localhost:3000",
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": "http://localhost:3000"
}
}
}
}
}