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
完成
重要提示
- 新增接口必须已经/开头 .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
上一篇: 荀彧忠于汉室,为何他不去投奔刘备呢?
下一篇: 两年了不知道我叫啥