3.vue-element-admin mock数据

最新推荐文章于 2024-08-08 08:28:36 发布

qq2276031

最新推荐文章于 2024-08-08 08:28:36 发布

阅读量836

点赞数 1

分类专栏： webpack 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq2276031/article/details/107046702

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

npm install @babel/core @babel/register mockjs -D

需要自定义vue.config.js

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js')
  }
}

根目录下需要以下文件

.env.development---这个对应本地地址打包环境

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

 
VUE_CLI_BABEL_TRANSPILE_MODULES = true  //使后面引入模板的代码支持es6

动态导入需要配置 VUE_CLI_BABEL_TRANSPILE_MODULES=true

https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

Vue CLI使用VUE_CLI_BABEL_TRANSPILE_MODULES环境变量来控制是否启用Babel插件动态导入节点插件

它只通过将所有import（）转换为require（）来完成一件事

当你有大量的页面时这种配置可以显著提高热更新的速度

缺乏对vue-cli的环境配置知识
模式和环境变量 | Vue CLI

dev-api在mock-server.js VUE_APP_BASE_API设置

// for mock server     VUE_APP_BASE_API
const responseFake = (url, type, respond) => {
  return {
    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
    type: type || 'get',
    response(req, res) {
      console.log('request invoke:' + req.path)
      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
    }
  }
}

http://localhost:8080/dev-api/vue-element-admin/article/list