hzsrc / vue-element-ui-scaffold-webpack4

vue下基于webpack4构建的多页面、多环境方案脚手架项目（使用了element-ui，可替换为其他）

vue-element-ui-scaffold-webpack4

注：

• 目前已升级为webpack5，如需要使用webpack4，可切换分支：git checkout webpack4。

• **vue3 + element-ui + webpack5 版本：可切换分支：git checkout vue3 **

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

项目效果预览1 项目效果预览2

1. 安装

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

2. 特性

基于webpack5 + babel@7 构建

更快的构建速度，更小的打包文件体积。

多页面实现

两种方式，自动输出html页面文件（html-webpack-plugin实现）：

• 在src/pages目录下添加任意js文件。js文件作为webpack入口；html页面模板是public/index.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-plus按需加载，主题色全局切换

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

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

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

源码映射

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

响应式布局

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

浏览器兼容性

兼容IE10及以上、Chrome、Firefox、Safari、QQ、360、2345等浏览器。如果需要改为移动端，请修改.browsersrc为移动端版本。

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 && npm run play-dist。

查看dist目录运行结果

npm run play-dist

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

启动mock服务

npm run mock

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

代理到80端口或443端口

npm run proxy80

通过将现有端口（80xx端口）代理到80端口或443端口，可实现访问时隐藏端口，也可实现https访问。结合系统hosts配置127.0.0.1为指定的域名，可直接用域名访问本地调试页面，用于调试一些必须使用域名访问的场景（例如调试微信，详见：https://www.cnblogs.com/hz-blog/p/wechat-local-debug-domain.html）。

vue-element-ui-scaffold-webpack4's Issues

前端学员一枚，求助，求解答一下

这个切换主题我非常喜欢，但是我实现不来，下载了您的项目run了也没能切换成功，不知道是不是还需要其他服务的支持还是说我这边的操作有误，求助求助，如果可以的话可以微信加我（微信号：vin51921）预先感谢!!!

help! 关于分离element-ui的字体文件路径报错

// 真实的输出路径 dist/pages/fonts
// 去寻找的输出路径 dist/pages/css/fonts
// 相当于相对于输出路径 (output.path)dist/pages/ + (MiniCssExtractPlugin)css/ + (file-loader.outputPath)fonst/
附上仓库地址 https://github.com/Sliect/webpack-path

webpack4以下的版本是不支持吗，使用webpack 3.6配置后，往body中最终插入的不是样式而是一个html页

配置如下

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
// const config = require('../src/config/appConfig')
module.exports = new ThemeColorReplacer({
  fileName: 'css/theme-colors.[contenthash:8].css',
  matchColors: [
    ...forElementUI.getElementUISeries('#409EFF')  //默认使用element-ui的蓝色（elementui默认颜色）
  ],
  changeSelector: forElementUI.changeSelector,
  isjsUgly:  process.env.NODE_ENV !== 'development',
})

// 调用如下
// 动态切换主题色
export function changeThemeColor (newColor) {
  let options = {
    newColors: [...forElementUI.getElementUISeries(newColor)]
  }
  return client.changer.changeColor(options, Promise).then(() => {
    alert('切换成功' + newColor)
  })
}

最终产生的文件如下

webpack版本：3.6，
elementui版本：2.13.0
请问有办法处理吗？

很不错

特别是处理css分离那块

[email protected]存在报错问题

node_modules\webpack-theme-color-replacer\src\Handler.js 70行

修改完之后的样子
这块应该是双引号

动态切换主题色

您好，请问我使用vue-cli3搭建的项目使用您的webpack-theme-color-replacer插件动态切换主题色，为什么elementUI自己的组件可以切换成功，但是在scss里面使用$--color-primary变量却不会动态改变呢？

请问一下VueLoader相关问题

vue-loader v15 废弃 了很多 options。为什么在 webpack.base.conf.js 中还使用 loaders 那些配置？

请问升级到webpack4，每次修改页面reload报错的问题解决了吗？

本地调试的时候每次修改完文件都会报错，看代码是reload的时候报错的，不知道是不是插件更新了，api更换了。。。

TypeError: cb is not a function
    at /Users/labs/webpack/office/build/dev-server.js:39:9
    at Promise (eval at create (/Users/labs/webpack/office/node_modules/tapable/lib/HookCodeFactory.js:74:10), <anonymous>:17:16)
    at new Promise (<anonymous>)
    at AsyncSeriesWaterfallHook.eval [as promise] (eval at create (/Users/labs/webpack/office/node_modules/tapable/lib/HookCodeFactory.js:74:10), <anonymous>:4:8)
    at AsyncSeriesWaterfallHook.lazyCompileHook (/Users/labs/webpack/office/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/labs/webpack/office/node_modules/html-webpack-plugin/index.js:673:47
    at Promise.resolve.then.then.then.then.then.then.then.then.catch.then.then (/Users/labs/webpack/office/node_modules/html-webpack-plugin/index.js:214:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

// dev-server.js
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {}
});
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        console.log('html-webpack-plugin-after-emit', data, cb)
        hotMiddleware.publish({ action: 'reload' });
        cb();
    });
});

关于 nuxt 生成css 文件为空文件

nuxt 下配置完文件可以生成，但是生成的 css 文件为空

项目效果预览网页打不开

控制台报错：

网址

数组中重复值会出现问题,

首先感谢提供这么好的插件
我在使用中发现一个问题, matchColors 是一个数组, 如果数组中出现重复的值的时候可能会对程序处理造成影响
我觉得是对比 oldColor 和 newColor 时, 在去处理匹配的样式时会出问题的
相同的色值, 不一定是相同的class, 是否可以使用 obj 键值对, 具名匹配 class 所对应的变量名称呢, 这样的话, 即使是重复的值也能精准对应到样式上,

在测试中同时发现, oldColor 与 newColor 中相同颜色, 不同位置是貌似也有类似问题

今天刚clone的，无法启动。

哪怕我手动修改了\node_modules\webpack-theme-color-replacer\src\Handler.js的错误，一样还是启动不了

css/theme-colors-*.css file is empty

new ThemeColorReplacer({
fileName: 'css/theme-colors-[contenthash:8].css', // output css file name, suport [contenthash] and [hash].
matchColors: ['#ed4040', '#4b0'], // colors array for extracting css file
resolveCss(resultCss) { // optional. Resolve result css code as you wish.
return resultCss.replace(/#4b0/g, '#ed4040')
},
externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
changeSelector(cssSelector) { // optional, Funciton. Changing css selectors, in order to raise css priority, to resolve lazy-loading problems.
return cssSelector
},
isJsUgly: process.env.NODE_ENV !== 'development' // optional. Set to true if your js is uglified. Default is set by process.env.NODE_ENV.
})

this is my config and when I npm run dev find this file size is 0B

---

页面重复引入css样式有什么好的解决方法吗？

element-ui 每个组件样式都有三个重复的。