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

2019-07-0815:56:28WEB前端开发Comments3,285 views字数 1164阅读模式

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

比较明显的是,Vue CLI 3.0移除了static文件目录configbuild 等配置目录,vue.config.js 也不是必备的文件如果需要进行相关配置我们需要在根目录下自己创建 vue.config.js 进行配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

另外Vue CLI 3.0新增了public 目录,这个目录下的静态资源不会经过 webpack 的处理,会被直接拷贝,所以我们能够直接访问到该目录下的资源。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

Vue CLI 2.0目录:如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

VueJS CLI 3.0如何配置mock文件代理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

Vue CLI 2.0目录文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

在Vue CLI 2.0,我们的模拟数据会放在static/mock/index.json里,访问以下地址http://localhost:8080/static/mock/index.json (默认8080端口,这里不做介绍),这时在config/index.js文件下配置,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

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

Vue CLI 3.0目录:如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

VueJS CLI 3.0如何配置mock文件代理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

Vue CLI 3.0目录文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

在Vue CLI 3.0,我们的模拟数据会放在public/mock/index.json里,访问以下地址http://localhost:8080/mock/index.json ,这时我们手动新建vue.config.js文件并做如下配置,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

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配置项的时候,一定要记得重启服务器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

之后在页面里,使用axios请求接口,如下即可获取到数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html

axios
 .get('/api/index.json')
 .then(res =<{ })
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/14015.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/14015.html

Comment

匿名网友 填写信息

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

确定