Mock2easy+nuxtjs安装搭建

如果对你有帮助请帮忙点个赞 :)
引用自:https://www.yunliantaida.com

效果

在这里插入图片描述

mock2easy介绍

优点

• 前后端分离模拟后端接口
• web可视化界面在线编辑mock
• 自动生成接口文档
• 合成Mockjs使静态的接口活起来

缺点

• 致命缺点就一个项目没人更新没有有些功能不好使.没有PUT

第一步

• 先搭建好nutx.js

yarn create nuxt-app abc
cd abc
npm run dev

应用现在运行在 http://localhost:3000 上运行。

第二步

• 编辑package.json

vim package.json

• 在devDependencies中添加mock2eas包

{
  "name": "abc",
  "version": "1.0.0",
  "description": "My first-class Nuxt.js project",
  "author": "lianwanchun",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.6.0",
    "@nuxtjs/proxy": "^1.3.3",
    "element-ui": "^2.4.11",
    "mavon-editor": "^2.7.6",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "mock2easy": "0.0.24"
  }
}

• 编辑nuxt.config.js 在文件尾部添加下面内容

{
  let mock2easy = require('mock2easy');
  let defaultConfig = {
    port: 8006,
    lazyLoadTime: 3001,
    database: 'mock2easy',
    doc: 'doc',
    ignoreField: [],
    interfaceSuffix: '.json',
    preferredLanguage: 'cn',
  };
  //
  mock2easy(defaultConfig, function(app) {
    app.listen(defaultConfig.port, function() {
      console.log(
        ('mock2easy is starting , please visit : http://127.0.0.1:' + defaultConfig.port).bold.cyan
      );
    });
  });
}

• 命令行执行

npm install

重要提示

• 新增接口必须已经/开头 .json结束现在的项目不会有点.json结尾
• 虽然他有interfaceSuffix配置点不填写不能添加接口.添加其他的有不合适只能用点.json
  解决方案
  编辑nuxt.config.js 配置如下代码

modules: ['@nuxtjs/axios', '@nuxtjs/proxy'],
  axios: {
    proxy: true, // 表示开启代理
    prefix: '/api/', // 表示给请求url加个前缀 /api
    credentials: true, // 表示跨域请求时是否需要使用凭证
  },
  proxy: {
    '/api': {
      target: 'http://localhost:8006', // 目标接口域名
      changeOrigin: true, // 表示是否跨域
      pathRewrite: function(path, req) {
        let parsedUrl = req._parsedUrl;
        let str = /^\/api/g;
        let query = parsedUrl.query ? '?' + parsedUrl.query : '';
        return parsedUrl.pathname.replace(str, '/') + '.json' + query;
      },
    },
  },

使用代理方式来增加.json但实际接口访问时看不到

• @nuxtjs/proxy @nuxtjs/axios 需要npm install

npm install @nuxtjs/axios @nuxtjs/proxy --save

转自:https://www.jianshu.com/u/9c5cb1ee4c46