个人搭建的可快速开发VUE项目的DEMO,其中结合了VUE+WEBPACK+MOCK。通过配置实现DEV环境下MOCK数据对PRO环境下真实接口数据实现模拟,并且本DEMO满足多页与单页混合开发。
Author | 梦人无语 |
---|---|
wangyanan609@qq.com |
clone项目地址 git clone git@github.com:wangyanan609/FastDev-VUE.git
安装第三方npm模块 npm install
在根目录下运行 npm run dev
自动打开页面,进行访问
├── build // webpack配置文件
├── config // 项目打包路径
├── dist // 打包项目文件
├── mock // 模拟数据
├── src // 源码目录
│ ├── assets // 公共资源
│ │ ├── css // 公共css
│ │ ├── images // 公共images
│ │ ├── js // 公共js
│ ├── components // 自定义组件
│ ├── pages // 多页面文件
├── static // 静态文件
│ ├── js // 静态JS
│ │ ├── config.js // 外部配置JS
│ │ ├── init.js // 外部配置初始化JS
通过config文件夹下的index.js,可对启动IP、端口、启动页面等相关配置
项目是否启动MOCK数据模拟,可以通过config文件夹下的dev.env.js,通过配置ISMOCK_ENV来决定是否启用。
'use strict';
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
HOST_ENV:'',
ISMOCK_ENV:1 //1:启用,0:禁用
});
MOCK文件建议按页面分包,并且必须以static下config.js配置的API接口名为文件名,必须是标准的JSON格式。
src的pages存放开发页面,从目录结构可以看出通过多页分包,并在各自页面配置路由,满足各页面的单页应用。注意:各html页面,在head中引入static下的两个静态js,可在此处开放动态加载外部JS。
static下的静态文件不会被webpack打包压缩,在webpack打包后生成dist内仍然会保留static目录,static下的config.js为配置文件,可用于PRO环境下正式HOST和接口名等配置参数,也可以配置外部需要动态加载的JS,但必须严格按照配置要求进行配置。
当接口涉及跨域问题,并且已经关闭MOCK的情况下,DEV环境下请求接口会自动通过proxyTable处理跨域。