Skip to content
vue下基于webpack4构建的多页面、多环境方案脚手架项目(使用了element-ui,可替换为其他)
JavaScript CSS Vue HTML
Branch: master
Clone or download
Latest commit 605f389 Jul 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea/codeStyles del Jun 29, 2019
build
config 动态sorce map优化 Jun 23, 2019
mock mockClient Jul 21, 2019
src mockClient Jul 21, 2019
.editorconfig editorconfig Jun 29, 2019
.eslintignore init Apr 19, 2018
.eslintrc.js 优化升级 Jul 20, 2019
.gitignore polyfill Jun 29, 2019
.npmrc title Dec 8, 2018
README.md
babel.config.js 优化升级 Jul 20, 2019
html.tpl.html 兼容IE 10 Apr 26, 2019
package-lock.json mockClient Jul 21, 2019
package.json mockClient Jul 21, 2019

README.md

vue-element-ui-scaffold-webpack4

本项目为vue下使用了element-ui并基于webpack4构建的多页面、多环境方案脚手架项目。

项目效果预览

1. 安装

git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
cd vue-element-ui-scaffold-webpack4
npm install

2. 特性

基于webpack4 + babel@7 构建

构建速度比之前版本明显加快。同时可优化了splitChunks参数,使目标文件总的下载体积减少。

多页面实现

两种方式,自动输出html页面文件(html-webpack-plugin实现):

  • 在src/pages目录下添加任意js文件。js文件作为webpack入口;html页面模板是html.tpl.html,页面的文件名为js的文件名。
  • 在src/pages目录下建立任意文件夹,包含entry.js、template.html两个文件。entry.js作为webpack入口;html页面模板是template.html,页面的文件名为建立的文件夹名。

自动用svg生成iconfont字体图标,支持webpack热重载

开发时在src/iconfont/svgs目录下,修改或添加、删除svg文件,可自动生成字体图标(支持ttf,woff2,woff,eot,svg)及配套的css样式、html预览;同时热重载立即可以看到效果。
也可npm run build-font手动生成这些文件。
无需再手动去icomoon.io或iconfont.cn生成和修改字体图标、css、图标预览了。 基于webpack-iconfont-plugin-nodejs实现。

mock数据实现

项目可采用dynamic-mocker作为后端接口的数据模拟。 模拟数据位于mock文件夹下,采用js文件实现,易于理解且方便灵活。

启用方法:
1、npm run dev默认会同时启动mock服务。
2、单独运行:npm run mock

配置文件:
1、config/serverMap.js中的接口服务地址为:base: '"//localhost:8085"' 2、mock/mock-config.js文件配置mock各种参数。

element-ui按需加载,主题色全局切换

css按需加载的来源直接指向element-ui的scss文件,而不是预编译的css文件。通过build/make-element-theme.js在编译时将src/assets/css/element-theme/theme-changed.scss文件 附加到element-ui主题变量文件element-theme-chalk/src/common/var.scss之前,实现了在修改scss变量后即可立马查看效果,无需预先编译element-ui的scss文件为css文件。同时可以在项目任意地方引用element-ui的scss变量。

运行时动态调整主题色(含自写的主题样式)

利用webpack-theme-color-replacer插件,在webpack构建时提取css中含有主题色的样式规则,生成一个css/theme-colors.css文件。然后在网页运行时,下载这个css文件,动态替换其中的颜色为自定义主题色。由于只提取了颜色相关的css,故速度比下载element-ui整个css要快很多。而且不仅仅是element-ui的样式,项目中的自写样式的主题色也可以一并替换掉。

源码映射

发布代码时生成源码映射文件到统一的源码映射文件夹,并在测试环境自动映射。生产环境为了代码安全,不进行自动映射,如需调试支持chrome通过url手动映射源码。
根据安全要求,这个源码映射文件夹名是只有开发者知道的文件夹名。或采是用动态加密算法生成此文件夹名。或者将这些源码映射文件放到需要进行登录验证的网站目录下。目录的名称请根据需要自行在config/index.js文件的getSourceMapPath函数中修改。
这样既可在出现bug需要进行线上调试时,快速手动添加源码映射来方便调试,又可以很大程度避免了源码泄露。

响应式布局

采用vw+rem的简洁方案实现响应式布局。
使用postcss-pxtorem插件自动将css中的单位由px转化为rem,开发时仍使用px做为css长度单位。1rem = 100px,调试时换算方便。pc和移动端通用(移动端最好将element-ui换为其他UI框架)。

浏览器兼容性

兼容IE10及以上、Chrome、Firefox、Safari、QQ、360、2345等浏览器。如果需要改为移动端,请修改package.json中的browserslist选项为移动端版本。

3. 命令说明

本地开发

npm run dev

本地开发调试。使用config/serverMap.js中的dev配置的后端接口服务地址。

发布测试环境

npm run build-test

用于测试环境部署。js带源码映射,css无源码映射。使用config/serverMap.js中的test配置的接口服务地址。

发布生产环境

npm run build

用于生产环境部署。使用config/serverMap.js中的prod配置的接口服务地址。

发布演示环境

npm run build-demo

配置同生产环境,仅接口服务地址不同,使用config/serverMap.js中的demo配置的接口服务地址。

发布开发环境

npm run build-dev

用于发布部署到开发环境服务器,适用于需要发布到服务器才能调试的情形。使用config/serverMap.js中的dev配置的接口服务地址。

启用mock数据发布

npm run build-preview

会启用静态mock数据,无需后端服务,使用mock数据来模拟ajax调用(前提是对应的api接口写了mock数据)。 等同于npm run build --preview。

查看dist目录运行结果

npm run play-dist

以dist目录为根目录,启动一个静态http服务,用于查看发布后dist目录的运行结果。

启动mock服务

npm run mock

当后端接口服务尚未完成时,可用于模拟后端接口数据调试前端功能。

代理到80端口或443端口

npm run proxy80

通过代理到80端口或443端口,可实现https访问,也可实现访问时隐藏端口。结合系统hosts配置,可用于模拟使用域名访问本地开发环境(例如调试微信)。

You can’t perform that action at this time.