Vue-cli3+Mock基础配置

在前端这一块，很多时候需要用到Mock数据，那本文就这一篇文章说一说最近很火的vue-cli3基础配置以及如何配置mock数据吧（如果需要自己手动配置webpcak3+vue和webpcak4+vue工程的请看我以前文章）。

1.安装@vue/cli脚手架

npm install -g @vue/cli

2.创建一个项目

> vue create projectName

然后根据自己喜欢的去配置，本人配置如下：

3.添加vue.config.js更改适合自己项目配置

// vue.config.js
const path = require('path')
const nodeExternals = require('webpack-node-externals')
module.exports = {
    configureWebpack: config => {
        config.entry = './src/index.js'  // 入口文件设置
        config.assetsDir = "static"  // 静态资源打包后放置目录
        config.resolve.alias['~'] = path.resolve(__dirname, 'src/components')
        if (process.env.NODE_ENV === 'test') {  // 单元测试配置，可忽略
            config.target = 'node'
            config.output.devtoolModuleFilenameTemplate = '[absolute-resource-path]'
            config.output.devtoolFallbackModuleFilenameTemplate = '[absolute-resource-path]?[hash]'
            config.externals = [nodeExternals()]
            config.devtool = "#inline-cheap-module-source-map"
        } else {
            config.output.filename = 'js/[name]-[hash:8].js'  // 输出文件名命名规则
            config.output.chunkFilename = 'js/[name]-[chunkhash:8].js' // 对于import(/* webpackChunkName: "name" */ 'src')命名有用
            config.devtool = process.env.NODE_ENV !== 'production' ? 'source-map' : ''
        }
    },
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')   // 建议移除这个插件，不然浏览器会在空闲时候下载整个应用的资源，对有流量要求用户不合理
    },
    publicPath: './',  //部署应用包时的基本 URL,建议设置成./
    productionSourceMap: false,  //生产环境的 source map 建议关闭加快构建
    css: {
        extract: true,  // 是否开启css提取，相当于vue-cli2中的extractTextPlugin插件
        sourceMap: process.env.NODE_ENV !== 'production'
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
        host: '0.0.0.0',
        port: 8008,
        open: true,
        compress: true,
        proxy: {
            '/api': {
                target: '服务器地址',
                pathRewrite: { '^/api': '/api' }
            }
        }
    }

}

4.添加Mock

在项目根目录下面添加mock文件夹

编写mock/index.js:

/** 
1.此处引入各个模块的mockdata 
2.此处测试为引入一个模块
*/ 
require('./storeclerk/mock.js')

 编写各个业务模块下代码：

import apiPath from '@/api/api-path'   //此处引入项目模块api路径
// 引入mockjs
const Mock = require('mockjs')

const Random = Mock.Random

const getMockData = {
    getData (options) {
        return {
            "code": 0,
            "data": {
                "userName": "VVVV",
                "userCode": "222"
            },
            "message": "\u6210\u529F"
        }
    }
}
const postMockData = {
  
    sumbitConfig () {
        return {
            "code": 0,
            "data": null,
            "message": "\u6210\u529F"
        }
    }
}
/* Mock.mock( url, get , 返回的数据) */
Mock.mock(RegExp(apiPath.login.getUserInfo + ".*"), 'get', getMockData.getData)

/* Mock.mock( url, post , 返回的数据) */
Mock.mock(apiPath.storeclerk.getDeptCode, 'post', postMockData.sumbitConfig )

 创建.env.mock文件

// 用来控制Mock数据是否生效
VUE_APP_MOCK = true

在项目入口文件处引入mock,如下：

// 引入mockjs只有在mock模式下才会拦截
process.env.VUE_APP_MOCK && require('../mock/index.js') 

 

5.修改package.json：添加自己喜欢脚本

"scripts": {
    "serve_mock": "vue-cli-service serve --mode mock",  // 添加mock环境脚本
    "build_sit": "vue-cli-service build --mode development",  // 添加测试环境打包脚本
    "build_prd": "vue-cli-service build",  // 生产环境打包脚本
    "devConfig": "vue-cli-service inspect --mode development >> webpack.config.development.js",     // 输出dev环境配置，方便查看
    "prdConfig": "vue-cli-service inspect --mode production >> webpack.config.production.js"  // 输出生产环境配置，方便查看
  },

这样小伙伴们就可以运行npm run serve_mock愉快的跑起来了

如果有更好的方案或者方法，欢迎留言讨论！