vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情

更新時間：2022年04月06日 15:53:56 作者：小糖豆豆豆豆

這篇文章主要介紹了vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

mockjs在dev和build環(huán)境的配置

cli4中環(huán)境配置

這里參考了這位的文章: vue-cli4.0多環(huán)境配置，變量與模式.寫的很詳細(xì)，大家可以移步去康康~~~

默認(rèn)情況下，Vue cli有三種開發(fā)模式:development,production,test.

自定義配置環(huán)境

cli4在自定義配置環(huán)境時，需要自己添加文件，像??????這樣：

在這里插入圖片描述

這兩個文件是我要自定義的開發(fā)環(huán)境(.env.development)和生產(chǎn)環(huán)境(.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'   // 這個是在開發(fā)環(huán)境中接口要請求的地址
VUE_APP_MOCK = true // 這個是在開發(fā)環(huán)境中加入mockjs模塊，這里設(shè)置的true或flase在下面mockjs里會寫。如果你的項目中不用mockjs可以不加這一行

.env.production:

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

現(xiàn)在完事具備，只差package.json配置了?。。?nbsp;

package.json:

"scripts": {
    "dev": "vue-cli-service serve --mode development", // dev是給開發(fā)環(huán)境自定義的名字，隨便寫，npm run 后面加這個名字。這里mode后面的 development就是上面.env.development文件中的VUE_APP_MODE的值，運(yùn)行dev環(huán)境就直接 npm run dev
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

運(yùn)行dev環(huán)境： npm run dev

// 理論知識見下面??，如果單純想實(shí)現(xiàn)功能，這塊可以忽略。

.env                // 在所有的環(huán)境中被載入
.env.local          // 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         // 只在指定的模式中被載入
.env.[mode].local   // 只在指定的模式中被載入，但會被 git 忽略

這里我理解的是當(dāng)運(yùn)行程序時，執(zhí)行順序: .env(所有環(huán)境) -> .env.[mode] (特定環(huán)境)。比如，當(dāng)運(yùn)行開發(fā)環(huán)境時，npm run dev ，執(zhí)行順序: 先.env 后.env.development。

（我猜這個.env是package.json—scripts中每個mode中vue-cli-service 后面的 serve/build，不過我沒有證據(jù)！如果大家有知道的請教教我?。。。?/p>

mockjs在vue cli4開發(fā)環(huán)境的配置及使用

1.安裝mockjs

進(jìn)入項目文件夾，執(zhí)行命令：npm install mockjs --save，將mockjs安裝到項目中。

2.創(chuàng)建mock文件夾

在src目錄下，創(chuàng)建mock文件夾，mock文件夾下創(chuàng)建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
); // 參數(shù)分別為請求要攔截的url(項目中請求地址只要 >包含< 了這個參數(shù),就會被攔截，第二個參數(shù)是請求方式，第三個參數(shù)是請求之后的response數(shù)據(jù))
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文件判斷當(dāng)前運(yùn)行環(huán)境中是否要加入mockjs。

mainjs:

添加一行代碼

process.env.VUE_APP_MOCK === 'true' && require('./mock/index'); 
// 如果process.env.VUE_APP_MOCK === 'true' 則引入mock文件夾下的index.js中的攔截.
// 至于true為什么要加引號，大家體驗(yàn)一下不加的情況就能明白了，.env.development文件中的value都自動加了引號。不信的話試試下面這行展開
// console.log(process.env.VUE_APP_MOCK, typeof process.env.VUE_APP_MOCK);

現(xiàn)在vue項目中就可以使用了：

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

vue中mockjs搭建使用說明

前后端分離的開發(fā)模式，前端需要向后端請求數(shù)據(jù)（ajax請求），但實(shí)際開發(fā)過程中，前后端會約定一份接口文檔，但前后端開發(fā)進(jìn)度并不一致，當(dāng)后端沒有完善接口功能時，前端需要在本地模擬數(shù)據(jù)返回，此時需要使用到mockjs。

也就是說，在后端接口還未開發(fā)時，前端人員卻需要調(diào)用接口進(jìn)行測試前端程序，前端人員就可以使用mockjs來模擬后端接口的返回數(shù)據(jù)。

使用mockjs，我們希望實(shí)現(xiàn)目的：

1、能夠模擬出表記錄對象數(shù)據(jù)

2、能夠?qū)崿F(xiàn)模擬出增刪改查接口操作

3、能夠配置只對手動配置的接口實(shí)現(xiàn)攔截

4、只在開發(fā)環(huán)境下mockjs可以攔截

安裝

npm install mockjs --save-dev

項目搭建

src 新增目錄結(jié)構(gòu)

mock

index.js 用于加載mock對api攔截的配置
mock-data.js 用于定義mock模擬數(shù)據(jù)對象方法
api
- userApi.js mock模擬api接口方法定義文件

注意：mockjs一般只用于開發(fā)環(huán)境下單元測試用

mock/index.js 配置mock對api攔截的文件

代碼：

// 引入mockjs
import Mock from 'mockjs'
// 引入api對應(yīng)的mock模擬接口方法文件
import userApi from './api/userApi.js'
//import customerApi from './api/customerApi.js'
// 設(shè)置200-1000毫秒延時請求數(shù)據(jù)
Mock.setup({
  timeout: '200-1000'
})
/********* 配置要攔截的 api (使用正則路徑匹配) 和 api對應(yīng)的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數(shù)據(jù)對象模擬方法

代碼示例：

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(),     // 隨機(jī)的英文姓名
                    real_name: Random.cname(),    // 隨機(jī)的中文姓名
                    "sex|1": ["男", "女"],        // 隨機(jī)取數(shù)組中一個元素
                    birthday: Random.date(),      // 隨機(jī)日期
                    mobile: /^1[3456789]\d{9}$/,  // 手機(jī)號碼
                    post: Random.pick(["設(shè)計", "開發(fā)", "測試", "實(shí)施"], 1, 3), // 從數(shù)組中隨機(jī)取1-3個元素重新組成數(shù)組
                    address: '@county(true)',       // 地址
                    email: "@email",                // Email
                    weight: Random.float(40, 90, 1, 1),  // Random.float(整數(shù)位最小值, 整數(shù)位最大值, 小數(shù)位最小位數(shù), 小數(shù)位最大位數(shù)) 實(shí)型
                    age: Random.integer(20, 55),    // 隨機(jī)取20 - 55之間的整數(shù)
                    e_memo: "@paragraph(1,2)",      // 英文文本(句子)
                    memo: "@cparagraph(1,2)",       // 中文文本(句子)一個參數(shù)時，參1：句子的個數(shù)；兩個參數(shù)時，參1：句子的最小個數(shù)  參2：句子的最大個數(shù)
                    "status|1": [0, 1, 2],          // 隨機(jī)取數(shù)組中一個元素
                    header: Random.image('200x100', '#50B347', '#FFF', 'Mock.js'), // 根據(jù)字符串text生成一張圖片 Random.image( size, background, foreground, text )
                })
            )
        }
        return List;
    },
    
    // 角色表
    ifs_ua_account_group: function(){
        let List = []
        const count = 8
        const name = ["管理員", "項目經(jīng)理", "測試經(jīng)理", "開發(fā)經(jīng)理"];
        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獲取參數(shù)，post從config.body中獲取參數(shù)
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
// 隨機(jī)生成的用戶列表數(shù)據(jù)
let List = mockdb.getTable("ifs_ua_account")
export default {
    /**
     * 獲取列表
     * 要帶參數(shù)  
     * @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: '參數(shù)不正確'
            }
        } else {
            List = List.filter(u => u.id !== id)
            return {
                code: 200,
                message: '刪除成功'
            }
        }
    }
}

項目配置

mockjs 在 dev環(huán)境下攔截請求

.env.development 開發(fā)環(huán)境變量配置文件中，增加變量

VUE_APP_MOCK = 1

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

// mock配置，實(shí)現(xiàn)只在dev環(huán)境下載入mockjs
process.env.VUE_APP_MOCK && require('@/mock/index.js')?

項目測試

前面的項目中搭建及配置都完成了，現(xiàn)在就可以調(diào)用axios訪問api進(jìn)行測試了

我們先在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 ，調(diào)用 getUserList() 方法，控制臺打印出返回的數(shù)據(jù)，測試完成。

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

開發(fā)流程

首先，我們知道m(xù)ock是用來模擬接口返回的，那么我們就先要將接口入?yún)⒓胺祷卮_認(rèn)定義好；

并且，我們要在src/api/目錄下的api方法要定義好；

這是兩個前提條件。

然后，才是前端測試，發(fā)現(xiàn)后端接口還沒開發(fā)，就自己做mock測試；

所以流程應(yīng)該是這樣：

接口入?yún)⒓胺祷囟x
完成前端功能開發(fā)
mock/mock-data.js 添加接口返回數(shù)據(jù)模型（這一步是可選的，目前還不確定是否要將數(shù)據(jù)模型定義單獨(dú)放到這里，還是直接放到 xxxApi.js里定義，要在實(shí)際項目應(yīng)用中，看情況再確認(rèn)）
mock/api/xxxApi.js 添加api接口mock方法
mock/index.js 添加api路由攔截配置

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: