vue cli 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,我们要对webpack做配置,需要自己手动在项目根目录创建一个vue.config.js文件
比如我们在组件中想通过axios请求一个api,mock数据在我们本地的public/static/mock下面的index.json文件中:(注意vue cli3里面已经不能访问和src平级的static目录里面的本地静态资源了,全都迁移到了public目录中,也就是之前和src目录平级的static文件夹移动到public目录中就可以正常访问了。比如此时我们可以通过浏览器http://localhost:8080/static/mock/index.json来访问本地的index.json文件)
这样是可以得到数据的:
但是如果我们要通过下面这种api形式的请求访问,就肯定不行
所以我们需要一个请求的转发机制,vue-cli3里面需要我们在vue.config.js里配置:
const path = require('path')
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
}
}
}
配置好以后保存,然后需要重启服务,就可以了