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

本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家

vue+webpack是否有多页面

目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈。

在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的。

那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,必须的必,vue、webpack的忠粉(哈哈,好像这忠粉不关系到多页面的)。

在谷歌找vue 多页面,实例还是比较少,功夫不负有心人,在yaoyao1987那找到了,具体可以到这个yaoyao1987 github,非常感谢yaoyao1987童鞋,今天要讲的内容是基于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,jsvue 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目录下马上就可以进行开发了,开发之前记得在cmdnpm 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.jswebpack.dev.conf.jswebpack.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'
 }
}

结束言

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

时间: 2017-07-12

详解基于vue-cli优化的webpack配置

最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

vue-cli中的webpack配置详解

版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

Struts 2中的constant配置详解

1.<constant name="struts.i18n.encoding" value="UTF-8" /> 指定Web应用的默认编码集,相当于调用 HttpServletRequest的setCharacterEncoding方法. 2.<constant name="struts.i18n.reload" value="false"/> 该属性设置是否每次HTTP请求到达时,系统都重新加载资源文

JSP 中spring事务配置详解

JSP 中spring事务配置详解 前几天被问到,如何防止服务器宕机,造成的数据操作的不完全. 问了一下同事,是事务.哎,恍然大悟,迷糊一时了. 声明式的事务配置,这个是最推荐的,配置到service层. <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context=&

SpringAOP中的注解配置详解

这篇文章主要介绍了SpringAOP中的注解配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用注解实现SpringAOP的功能: 例子: //表示这是被注入Spring容器中的 @Component //表示这是个切面类 @Aspect public class AnnotationHandler { /* * 在一个方法上面加上注解来定义切入点 * 这个切入点的名字就是这个方法的名字 * 这个方法本身不需要有什么作用 * 这个方法的

git中ssh key配置详解

git clone支持https和git(即ssh)两种方式下载源码: 当使用git方式下载时,如果没有配置过ssh key,则会有如下错误提示: 下面就介绍一下如何配置git的ssh key,以便我们可以用git方式下载源码. 首先用如下命令(如未特别说明,所有命令均默认在Git Bash工具下执行)检查一下用户名和邮箱是否配置(github支持我们用用户名或邮箱登录): git config --global --list 笔者的机器显示信息如下(已配置): 如未配置,则执行以下命令进行配置

mybatis中的setting配置详解

在mybaits中,setting的的配置参数如下(如果不在配置文件中配置将使用默认值): 设置参数 描述 有效值 默认值 cacheEnabled 该配置影响的所有映射器中配置的缓存的全局开关 true | false true lazyLoadingEnabled 延迟加载的全局开关.当开启时,所有关联对象都会延迟加载. 特定关联关系中可通过设置fetchType属性来覆盖该项的开关状态 true | false false aggressiveLazyLoading 当启用时,对任意延迟属

django中SMTP发送邮件配置详解

Django中内置了邮件发送功能,被定义在django.core.mail模块中.发送邮件需要使用SMTP服务器,常用的免费服务器有:163.126.QQ,下面以qq邮箱为例. 注册qq邮箱,然后登录设置 找到设置里面POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务 3.需要发送验证码生成授权码 4.找到settings.py文件,中点击下图配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBacken

Nginx服务器中的location配置详解

语法 location  [=|~|~*|^~] /uri/  {...} 规则 = : 表示精确的URI匹配(有兴趣的同学可以看一下url和uri的区别) -: 表示区分大小写的正则匹配 -*:表示不区分大小写的正则匹配 !~ && !~*:表示区分大小写不匹配的正则和不区分大小写的不匹配的正则 /:通用匹配,任何请求都会匹配到 location匹配目标 location匹配测试只使用请求URI的部分,而不使用参数部分.(原因:参数的写法太多,无法精确匹配) location匹配顺序 多

Eclipse中maven的配置详解

1. 需要准备:apache-maven-3.2.3.zip包    Repository.rar本地仓库 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

vue 项目常用加载器及配置详解

本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2