详解vue-cli + webpack 多页面实例配置优化方法

Vue CLI Webpack 多页面应用配置优化概述

本文介绍了一种基于vue-cli和webpack的多页面应用配置优化方案，旨在提升开发效率与项目维护性，供开发者参考。

探讨Vue结合Webpack实现多页面应用的可行性。

当前使用Vue进行项目开发时，大多数情况采用的是单页面应用（SPA）。作为一个轻型的MVVM框架，一旦习惯了MVVM的开发模式，便很难再回到jQuery时代。

在移动端项目中，采用Vue配合vue-router进行开发体验极佳。这不仅体现在开发过程的顺畅，更在于用户获得的流畅体验，交互感非常出色。

既然单页面应用体验如此出色，那么多页面应用是否也能达到同样的高水准？答案是肯定的。作为Vue和Webpack的忠实用户，多页面应用同样可以带来极致的开发体验。

在网络上搜索Vue多页面应用的实例相对较少。经过努力，在yaoyao1987的GitHub项目中找到了相关示例，在此向yaoyao1987表示感谢。本文的内容正是基于该多页面实例进行的进一步优化。

具体优化了哪些内容？

项目GitHub地址：https://github.com/bluefox1688/vue-cli-multi-page

详细优化内容说明。

接下来详细介绍具体的优化点。

1. 增加了全局统一使用的模块Lib.js库，后续章节将对此进行详细解释。
2. 增加了对字体图标的支持。
3. 提供了简洁的页面和组件模板，复制后即可直接使用。
4. 去除了冗余的代码注释，避免误导后续开发者。
5. 在构建过程中，增加了对CSS打包的支持。
6. 实现了公共模块的提取与优化。

项目配置与目录结构详解

具体使用方法说明。

# 安装
npm install

# 调试环境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev

# 生产环境 build for production with minification
npm run build

本地默认访问端口为8083，如需更改端口，请前往项目根目录文件config.js中进行修改。

项目目录结构解析。

webpack
 |---build
  |---src
   |---assets 资源
     |---css.css css
     |---img 图片文件
     |---font/ 字体图标
   |---components 组件
      |---Button.vue 按钮组件
     |---module-head.vue head组件
   |---module各个页面模块
    |---login  登陆模块
     |---login.html
     |---login.js
     |---app.vue
    |---welcome    欢迎页模块
     |---welcome.html
     |---welcome.js
     |---app.vue

从目录结构来看，各类组件、页面模块及资源均按类别建立了独立文件夹，便于文件存储与管理。

实际上，所有核心文件主要放置在module文件夹内，且以文件夹名称作为HTML文件的名称。

例如，

 |---login  登陆模块
  |---login.html
  |---login.js
  |---app.vue

访问地址即为：http://localhost:8083/module/login.html

需特别注意，在module目录下的子文件夹中，每个文件夹代表一个独立的HTML页面。js和vue template 均统一存放于当前文件夹内，当然也可放入其他资源如CSS或图片等，Webpack会自动将其打包至当前页面。

若项目不再需要某个页面，可直接删除对应文件夹，保持项目整洁，提升开发愉悦感。

与传统开发模式不同，以往习惯将所有图片放置在images中。当项目发生变动时，部分图片资源可能不再使用，但仍占用空间。

尽管当前硬件存储容量巨大，但仍应养成良好的资源管理习惯。

当前页面的开发主要在app.vue中进行，打开后即可看到熟悉的<template>、<script>、<style scoped>结构。

全局统一公共模块配置

全局统一公共模块的配置。

进行多页面开发时，必然涉及全局可调用的公共库，或需将封装好的第三方库打包至全局公共模块中。

查看源码的开发者可知，在*.vue页面中，统一import了一个特定文件。

import Lib from 'assets/Lib.js'

这便是全局统一公共模块，首先查看Lib.js中的代码实现。

# 导入全局的css
import 'assets/css.css';
# 导入全局的站点配置文件
import C from 'assets/conf';
# 导入全局的共用事件
import M from 'assets/common';

var Rxports = {
  M,C
};

module.exports = Rxports

上述代码中的M和C分别代表什么？聪明的读者应已明白其用意，即简化书写，提高效率。

例如，若需调用APP名称，在.vue文件中可如此编写。

import Lib from 'assets/Lib.js'
Lib.C.appname; # 蓝锅锅

只需在*.vue中导入import Lib from 'assets/Lib.js'，即可在全局模块中随处使用。

这不再像传统开发模式那样，需要一堆的<script>逐一放置于页面底部。

传统方式示例：

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

此处即前文提到的优化第一点：全局模块库。

可能有开发者疑问，每个页面是否都会将全局模块库打包至当前页面，导致JS文件体积庞大？

Webpack并非简单处理，webpack会自动完成优化，将*.vue中的import Lib from 'assets/Lib.js'库自动提取出来，放入一个全局JS文件中。这种自动构造机制省心省力，无需重复劳动。

在Lib.js中，还可见两个导入的JS文件，它们的作用是什么？

为了在全局调用模块时清晰识别各模块功能，并在编码时快速定位JS文件，我们将文件区分为配置文件和共用事件文件，即conf和common。下文将具体说明其用途。

# 储存站点的配置，例如web的名称、LOGO地址等
import C from 'assets/conf';
# 导入全局的共用事件，例如在微信的JS SDK初始化，每个页面都要分享，都需要初始化的，一次调用，全局使用，棒！！
import M from 'assets/common';

当然，也可不区分不同JS文件，删除亦无影响，具体需根据项目需求灵活调整，不可死板套用。

此外，如需获取干净的页面模块模板，可前往根目录的tpl中复制module_tpl整个文件夹，然后粘贴至src/module目录下即可开始开发。开发前，请务必在cmd中执行npm run dev命令，新增页面后需重新运行dev。

关于module模块的讲解至此结束，接下来介绍组件的调用，这是最令人喜爱的部分。

组件化开发与图标字体支持

组件的使用指南。

组件（Component）是Vue.js最强大的功能之一，当发现使用组件能减少重复造轮子时，你会深深爱上它。 我们的组件均放置在components目录下，调用组件的方法十分简单。

import Button from 'components/Button';

随后，记得在*.vue文件中注册导入的组件，否则将无法正常使用。

import Button from 'components/Button';
export default {
 data() {
  return {
    
  }
 },
 components: {
  # 在这里注册组件，不注册组件的话，是无法使用的。
  Button  
 } 
}

如需获取干净的组件模板，可前往根目录的tpl中找到components_tpl下的Hello.vue文件，复制并粘贴至components目录下即可开始开发。

图标字体的配置。

在yaoyao1987的原始项目中，并未包含打包构造图标字体的代码逻辑，这也是本次优化的内容之一。建议使用iconfont图标（http://www.iconfont.cn），其功能强大，可前往iconfont下载所需的图标字体，记得将文件放置于\src\assets\font文件夹中。

webpack会自动处理打包，无需额外干预。另外，还需将iconfont提供的css文件复制到\src\assets\css.css文件中，否则图标将无法显示。

在*.vue中直接调用即可生效。

<i class="iconfont">&#33</i>

构建配置与缓存处理机制

构建代码的详细说明。

本项目采用vue-cli脚手架，使用过vue+cli的开发者可知，主要构建代码均存放于根目录build下。Vue多页面应用主要修改了这三个JS文件：webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf.js。

# 【webpack.base.conf.js】主要是构建的全局设置，主要是增加了以下代码，已经增加在JS文件里，这里只是做一个补充说明，具体请看`build/webpack.base.conf.js`。

var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);

plugins: [
  // 提取公共模块
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendors', // 公共模块的名称
   chunks: chunks, // chunks是需要提取的模块
   minChunks: chunks.length
  }),
  // 配置提取出的样式文件
  new ExtractTextPlugin('css/[name].css')
 ]

function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 
 return entries;
}

此处需特别说明，每次更新资源文件时，为去除缓存，都会为文件生成hash值，例如：

<script type='text/javascript' src='vendors.61714a310523a3df9869.js' charset='utf-8'></script>
<script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>

这两种方式均旨在去除缓存，唯一区别在于生成的文件名不同。部分项目为在出现严重BUG时能第一时间回滚，采用文件名+hash的方式存储，每次生成均不覆盖之前的代码，便于排查BUG或回滚。

另一种方式则是以文件名+?hash的方式存储，每次均覆盖之前生成的资源，适用于某些特殊项目场景。

我在webpack.base.conf.js中已对此进行了注释说明。

module.exports = {
 entry: entries,
 output: {
  path: config.build.assetsRoot,
  publicPath: config.build.assetsPublicPath,
  /* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
  //filename: '[name].[hash].js'
  /* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
  filename: '[name].js'
 }
} 

结语。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。