在前端这一块,很多时候需要用到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愉快的跑起来了
如果有更好的方案或者方法,欢迎留言讨论!