欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Mock2easy+nuxtjs安装搭建

程序员文章站 2022-07-10 13:44:33
...

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

完成Mock2easy+nuxtjs安装搭建

重要提示

  • 新增接口必须已经/开头 .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