VueJS CLI 3.0如何配置mock文件代理

2019年7月8日15:56:28 发表评论 231 views

开发Vue的项目时,经常会遇到后台的接口没有完成或者没有稳定,我们都是采用模拟数据的方式去进行开发项目。以便提高我们的开发效率。那如何在前端做一些 mock 数据的处理呢?这里Vue CLI 2.0和Vue CLI 3.0的差别还是挺大的:

比较明显的是,Vue CLI 3.0移除了static文件目录configbuild 等配置目录,vue.config.js 也不是必备的文件如果需要进行相关配置我们需要在根目录下自己创建 vue.config.js 进行配置。

另外Vue CLI 3.0新增了public 目录,这个目录下的静态资源不会经过 webpack 的处理,会被直接拷贝,所以我们能够直接访问到该目录下的资源。

Vue CLI 2.0目录:如下

VueJS CLI 3.0如何配置mock文件代理

Vue CLI 2.0目录

在Vue CLI 2.0,我们的模拟数据会放在static/mock/index.json里,访问以下地址http://localhost:8080/static/mock/index.json (默认8080端口,这里不做介绍),这时在config/index.js文件下配置,

module.exports = {
 dev: {
 // Paths fiddler charles
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
 '/api': {
 target: 'http://localhost:8080',
 pathRewrite: {
 '^/api': '/static/mock'
 }
 }
 }
 }
}

Vue CLI 3.0目录:如下

VueJS CLI 3.0如何配置mock文件代理

Vue CLI 3.0目录

在Vue CLI 3.0,我们的模拟数据会放在public/mock/index.json里,访问以下地址http://localhost:8080/mock/index.json ,这时我们手动新建vue.config.js文件并做如下配置,

module.exports = {
 devServer: {
 host: "localhost",
 port: 8080, // 端口号
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 // 配置多个代理
 proxy: {
 "/api": {
 target: "http://localhost:8080",
 // ws: true,
 // changeOrigin: true,
 pathRewrite: {
 '^/api': '/mock'
 }
 }
 }
 }
}

注意:修改webpack配置项的时候,一定要记得重启服务器。

之后在页面里,使用axios请求接口,如下即可获取到数据

axios
 .get('/api/index.json')
 .then(res =<{ })

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: