vue cli4中mockjs在dev环境和build环境的配置详情

目录
  • mockjs在dev和build环境的配置
    • cli4中环境配置
    • 自定义配置环境
    • mockjs在vue cli4开发环境的配置及使用
  • vue中mockjs搭建使用说明
    • 安装
    • 项目搭建
    • 项目配置
    • 项目测试
    • 开发流程

mockjs在dev和build环境的配置

cli4中环境配置

这里参考了这位的文章: vue-cli4.0多环境配置,变量与模式.写的很详细,大家可以移步去康康~~~

默认情况下,Vue cli有三种开发模式:development,production,test.

自定义配置环境

cli4在自定义配置环境时,需要自己添加文件,像这样:

这两个文件是我要自定义的开发环境(.env.development)和生产环境(.env.production)的配置文件。

.env.development:

NODE_ENV='development'
// 注意自定义的变量名前面一定要加VUE_APP_ ,在项目中如果想要获取这里的自定义变量可用process.env.比如,想在mainjs里打印下面定义的url可以用window.console.log(process.env.VUE_APP_URL)
VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx'   // 这个是在开发环境中接口要请求的地址
VUE_APP_MOCK = true // 这个是在开发环境中加入mockjs模块,这里设置的true或flase在下面mockjs里会写。如果你的项目中不用mockjs可以不加这一行

.env.production:

NODE_ENV='production'
VUE_APP_URL = ''
VUE_APP_MOCK = false

现在完事具备,只差package.json配置了!!!

package.json:

"scripts": {
    "dev": "vue-cli-service serve --mode development", // dev是给开发环境自定义的名字,随便写,npm run 后面加这个名字。这里mode后面的 development就是上面.env.development文件中的VUE_APP_MODE的值,运行dev环境就直接 npm run dev
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

运行dev环境 : npm run dev

// 理论知识见下面,如果单纯想实现功能,这块可以忽略

.env                // 在所有的环境中被载入
.env.local          // 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         // 只在指定的模式中被载入
.env.[mode].local   // 只在指定的模式中被载入,但会被 git 忽略

这里我理解的是当运行程序时,执行顺序: .env(所有环境) -> .env.[mode] (特定环境)。比如,当运行开发环境时,npm run dev ,执行顺序: 先.env 后.env.development。

(我猜这个.env是package.json—scripts中每个mode中vue-cli-service 后面的 serve/build,不过我没有证据!如果大家有知道的请教教我!!!)

mockjs在vue cli4开发环境的配置及使用

1.安装mockjs

进入项目文件夹,执行命令:npm install mockjs --save,将mockjs安装到项目中。

2.创建mock文件夹

在src目录下,创建mock文件夹,mock文件夹下创建index.js

index.js

一定注意!!!get请求需要把url写成正则,否则不能拦截

import Mock from 'mockjs'; // 引入mockjs
const data = {
  Message: '查询成功',
  Code: 1,
  Data: {
    Id: '',
    name: ''
  }
};
// 拦截请求延迟
// Mock.setup({
//   timeout: 3000
// });
// 一定注意!!! get请求需要把url写成正则,否则不能拦截
Mock.mock(
  /https:\/\/www.baidu\.com\//,
  'get',
  data
); // 参数分别为请求要拦截的url(项目中请求地址只要 >包含< 了这个参数,就会被拦截,第二个参数是请求方式,第三个参数是请求之后的response数据)
export default Mock;

.env.development:

NODE_ENV='development'
VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx'
VUE_APP_MOCK = true

VUE_APP_MOCK = true 是为了在mainjs文件判断当前运行环境中是否要加入mockjs。

mainjs:

添加一行代码

process.env.VUE_APP_MOCK === 'true' && require('./mock/index');
// 如果process.env.VUE_APP_MOCK === 'true' 则引入mock文件夹下的index.js中的拦截.
// 至于true为什么要加引号,大家体验一下不加的情况就能明白了,.env.development文件中的value都自动加了引号。不信的话试试下面这行展开
// console.log(process.env.VUE_APP_MOCK, typeof process.env.VUE_APP_MOCK);

现在vue项目中就可以使用了:

this.axios.get('https://www.baidu.com/').then(res => {
	console.log(res.data) // 这个的返回结果就是mock-> index.js文件中的data
});

vue中mockjs搭建使用说明

前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份 接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs。

也就是说,在后端接口还未开发时,前端人员却需要调用接口进行测试前端程序,前端人员就可以使用mockjs来模拟后端接口的返回数据。

使用mockjs,我们希望实现目的:

1、能够模拟出表记录对象数据

2、能够实现模拟出增删改查接口操作

3、能够配置只对手动配置的接口实现拦截

4、只在开发环境下mockjs可以拦截

安装

npm install mockjs --save-dev

项目搭建

src 新增目录结构

mock

  • index.js 用于加载mock对api拦截的配置
  • mock-data.js 用于定义mock模拟数据对象方法
  • api
    • userApi.js mock模拟api接口方法定义文件

注意:mockjs一般只用于开发环境下单元测试用

mock/index.js 配置mock对api拦截的文件

代码:

// 引入mockjs
import Mock from 'mockjs'
// 引入api对应的mock模拟接口方法文件
import userApi from './api/userApi.js'
//import customerApi from './api/customerApi.js'
// 设置200-1000毫秒延时请求数据
Mock.setup({
  timeout: '200-1000'
})
/********* 配置要拦截的 api (使用正则路径匹配) 和 api对应的mock模拟接口方法 ********/
// 用户
Mock.mock(/\/api\/user\/list/, 'get', userApi.getUserList)
Mock.mock(/\/user\/info/, 'get', userApi.getUser)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/del/, 'post', userApi.deleteUser)

mock/mock-data.js 定义mock数据对象模拟方法

代码示例:

import Mock from 'mockjs'
const Random = Mock.Random
export default {
    // 缓存mock data
    store: {},

    // 获取表 mock data
    getTable: function(tableName){
        if(this.store[tableName]){
            return this.store[tableName]
        }else{
            let func = this[tableName];
            this.store[tableName] = func();
            return this.store[tableName]
        }
    },

    // 用户表
    ifs_ua_account: function(){
        let List = []
        const count = 200
        for (let i = 0; i < count; i++) {
            List.push(
                Mock.mock({
                    uid: i + 1,
                    user_name: Random.name(),     // 随机的英文姓名
                    real_name: Random.cname(),    // 随机的中文姓名
                    "sex|1": ["男", "女"],        // 随机取数组中一个元素
                    birthday: Random.date(),      // 随机日期
                    mobile: /^1[3456789]\d{9}$/,  // 手机号码
                    post: Random.pick(["设计", "开发", "测试", "实施"], 1, 3), // 从数组中随机取1-3个元素重新组成数组
                    address: '@county(true)',       // 地址
                    email: "@email",                // Email
                    weight: Random.float(40, 90, 1, 1),  // Random.float(整数位最小值, 整数位最大值, 小数位最小位数, 小数位最大位数) 实型
                    age: Random.integer(20, 55),    // 随机取20 - 55之间的整数
                    e_memo: "@paragraph(1,2)",      // 英文文本(句子)
                    memo: "@cparagraph(1,2)",       // 中文文本(句子)一个参数时,参1:句子的个数;两个参数时,参1:句子的最小个数  参2:句子的最大个数
                    "status|1": [0, 1, 2],          // 随机取数组中一个元素
                    header: Random.image('200x100', '#50B347', '#FFF', 'Mock.js'), // 根据字符串text生成一张图片 Random.image( size, background, foreground, text )
                })
            )
        }
        return List;
    },

    // 角色表
    ifs_ua_account_group: function(){
        let List = []
        const count = 8
        const name = ["管理员", "项目经理", "测试经理", "开发经理"];
        for (let i = 0; i < name.length; i++) {
            List.push(
                Mock.mock({
                    id: i + 1,
                    role_name: name[i],
                    role_memo: "@cparagraph(1,2)",
                    role_code: /UG-\d{2}-\d{2}-\d{2}/    // "UG-NN-NN-NN"格式
                })
            )
        }
        return List;
    }
}

mock/api/xxxxApi.js mock模拟api接口方法定义

示例代码:

import Mock from 'mockjs'
import mockdb from "@/mock/mock-data.js"
// get请求从config.url获取参数,post从config.body中获取参数
function param2Obj(url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
        '"}'
    )
}
const Random = Mock.Random
// 随机生成的用户列表数据
let List = mockdb.getTable("ifs_ua_account")
export default {
    /**
     * 获取列表
     * 要带参数
     * @param
     * @return {{code: number, message: string, data: *[]}}
     */
    getUserList: config => {
        const {
            name,
            page = 1,
            limit = 20
        } = param2Obj(config.url)
        return {
            code: 200,
            message: '',
            data: List
        }
    },

    /**
     * 增加用户
     * @param name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    createUser: config => {
        const {
            name,
            addr,
            age,
            birth,
            sex
        } = JSON.parse(config.body)
        console.log(JSON.parse(config.body))
        List.unshift({
            id: Mock.Random.guid(),
            name: name,
            addr: addr,
            age: age,
            birth: birth,
            sex: sex
        })
        return {
            code: 20000,
            data: {
                message: '添加成功'
            }
        }
    },

    /**
     * 删除用户
     * @param id
     * @return {*}
     */
    deleteUser: config => {
        const {
            id
        } = param2Obj(config.url)
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            List = List.filter(u => u.id !== id)
            return {
                code: 200,
                message: '删除成功'
            }
        }
    }
}

项目配置

mockjs 在 dev环境下拦截请求

.env.development 开发环境变量配置文件中,增加变量

VUE_APP_MOCK = 1

main.js 文件中增加下面代码

// mock配置,实现只在dev环境下载入mockjs
process.env.VUE_APP_MOCK && require('@/mock/index.js') 

项目测试

前面的项目中搭建及配置都完成了,现在就可以调用axios访问api进行测试了

我们先在src/api/ 目录下新建一个userApi.js 文件,定义向后端请求的方法;

src/api/userApi.js 代码:

import https from '@/https.js'
const userApi = {
    baseUrl: '/api',

    getUserList: function(params){
        return https.fetchGet(this.baseUrl + "/user/list", {});
    },
};
export default userApi

然后,我们在App.vue中,引入 src/api/userApi.js ,调用 getUserList() 方法,控制台打印出 返回的数据,测试完成。

userApi.getUserList().then((response)=>{
    console.log(response.data)
})

开发流程

首先,我们知道mock是用来模拟接口返回的,那么我们就先要将接口入参及返回确认定义好;

并且,我们要在src/api/目录下的api方法要定义好;

这是两个前提条件。

然后,才是前端测试,发现后端接口还没开发,就自己做mock测试;

所以流程应该是这样:

  • 接口入参及返回定义
  • 完成前端功能开发
  • mock/mock-data.js 添加接口返回数据模型 (这一步是可选的,目前还不确定是否要将数据模型定义单独放到这里,还是直接放到 xxxApi.js里定义,要在实际项目应用中,看情况再确认)
  • mock/api/xxxApi.js 添加api接口mock方法
  • mock/index.js 添加api路由拦截配置

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue cli4.0 如何配置环境变量

    目录 1.创建不同环境变量文件 2.给.env文件添加内容 3.在package.json中添加不同环境对应的执行语句 4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli构建的项目中,默认有3种模

  • vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

    由于最新版本的vue-cli已经放弃dev-server.js,需在webpack.dev.conf.js配置才行 新版本的webpack.dev.conf.js配置如下: const express require('express') const app =express() var appData = require('..data.json') var seller = appData.seller var goods = appData.goods var ratings = appD

  • vue-cli4.0多环境配置变量与模式详解

    vue-cli2.x还是vue-cli4.x模式的多环境变量配置方法(忘了). 1.在package.json文件中 "scripts": { "dev": "cross-env APP_ENV=dev node build/dev-server.js", "devTH": "cross-env APP_ENV=tianhe node build/dev-server.js", "build:pr

  • vue cli4中mockjs在dev环境和build环境的配置详情

    目录 mockjs在dev和build环境的配置 cli4中环境配置 自定义配置环境 mockjs在vue cli4开发环境的配置及使用 vue中mockjs搭建使用说明 安装 项目搭建 项目配置 项目测试 开发流程 mockjs在dev和build环境的配置 cli4中环境配置 这里参考了这位的文章: vue-cli4.0多环境配置,变量与模式.写的很详细,大家可以移步去康康~~~ 默认情况下,Vue cli有三种开发模式:development,production,test. 自定义配置环

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • vue项目中使用rimraf dev启动时删除dist目录方式

    目录 使用rimraf dev启动时删除dist目录 vue修改dist目录 使用rimraf dev启动时删除dist目录 适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录 webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge =

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • 详解.vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目中使用了elementUI框架, 与.vue文件. 现状: <template>中使用$style:[类名], <style module>进行了样式的绑定. 个人认为使用$style这种方式的绑定, 写起来很麻烦. 不仅仅是麻烦更重要的是, 没有办法直接影响和修改elemen

随机推荐