本文介绍了vue-cli + webpack 多页面实例配置优化方法，分享给大家 [b]vue+webpack是否有多页面 [/b] 目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代了，哈哈。 在手机端的项目，使用vue + vue-router是high到爆，不仅仅是我们开发的而言，最主要的用户体检也是开足马力，体检感杠杠的。 那问题来了，使用vue+webpack的单页面是爽到爆，那如果是多页面也能不能high到爆呢？那当然呀，必须的必，vue、webpack的忠粉（哈哈，好像这忠粉不关系到多页面的）。 在谷歌找vue 多页面，实例还是比较少，功夫不负有心人，在yaoyao1987那找到了，具体可以到这个yaoyao1987 github，非常感谢yaoyao1987童鞋，今天要讲的内容是基于yaoyao1987童鞋的多页面实例上再优化的。 [b]优化了点啥[/b] github地址：[url=https://github.com/bluefox1688/vue-cli-multi-page]https://github.com/bluefox1688/vue-cli-multi-page[/url] [b]优化的内容[/b] 我们先来讲讲，具体我们优化了什么内容。 [list=1] [*]增加全局统一使用的模块Lib.js库，可能这里看不明白，不要紧，后面会讲到。[/*] [*]支持字体图标[/*] [*]增加干净的页面、组件的模板，复制即可以使用。[/*] [*]去掉多余的代码注释，坑了我的注释，别再坑人了[/*] [*]构建时，增加对css打包的支持[/*] [*]提取公共模块........[/*] [/list] [b]使用方法[/b] 本地默认访问端口为8083，需要更改的童鞋请到项目根目录文件[code]config.js[/code]修改。 [b]目录结构[/b] 从目录结构上，各种组件、页面模块、资源等都按类新建了文件夹，方便我们储存文件。 其实我们所有的文件，最主要都是放在[code]module[/code]文件夹里，以文件夹名为html的名称。 例如 就是我们访问时的地址：http://localhost:8083/module/login.html 这里一定要记住，在[code]module[/code]里下级文件夹，一个文件夹就是一个html，[code]js[/code]、[code]vue template [/code]都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前页面里。 如果项目不需要这个页面了，可以直接把这个文件夹直接删除掉，干净项目，干活也开心。 像以前我们传统开发项目，所有的图片都习惯放在[code]images[/code]里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，虽 然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。 当前页面的开发在[code]app.vue[/code]里，打开后你就会看到很熟悉的[code]<template>、<script>、<style scoped>[/code]了。 [b]全局统一公共模块[/b] 我们做多页面开发，那肯定会涉及到全局都能调用的公共库，或者是把别人封装的库也一起打包在全局公共模块里。 如果看过源码的童鞋，在[code]*.vue[/code]页面里，我都统一import了一个文件 这就是全局统一公共模块，我们先看看Lib.js里的代码 在上方代码的M、C都是什么鬼，聪明的小伙伴就知道我想干嘛了，省写少事呗。 例如我们现在想调用APP的名称，在.vue里可以这么写 只需要在[code]*.vue[/code]里导入[code]import Lib from 'assets/Lib.js'[/code]，就可以到处使用全局模块了。 不再像传统的开发模式，需要一堆的[code]<script>[/code]一个一个的来放到页面的底部。 传统方式： 这里就是我想讲的关于优化的第一点提到的全局模块库。 当然也有童鞋问呀，会不会每个页面都会把这些全局模块库都打包在当前页面，那JS文件体积大到惊人。 哎呀，你当webpack是二货的呀，[code]webpack[/code]会自动帮你处理好的，会把在[code]*.vue[/code]里的[code]import Lib from 'assets/Lib.js'[/code]的库自动提取出来，放到一个全局的JS文件里，这就是自动构造的神奇呀，省心省电，妈妈再也不用担心我做重复的工作了。 在[code]Lib.js[/code]里，我们也看到有两个导入的JS文件，主要来做什么的呢？ 为了更好的在全局调用模块里，知道哪个模块的作用是什么，另外在写代码时更能快速查找到JS文件，我区分了配置文件和共用事件文件，即conf、common，下面说下具体的用途。 当然，你也可以不像这样区分不同的JS文件，删除也没有影响的，具体也要看项目的需要而定，不能死读书。 另外，如果想要干净的页面模块模板，可以到根目录的[code]tpl[/code]里复制[code]module_tpl[/code]整个文件夹，然后粘贴到[code]src/module[/code]目录下马上就可以进行开发了，开发之前记得在[code]cmd[/code]里[code]npm run dev[/code]跑一遍，新增页面都要重新dev一遍。 [code]module[/code]我们就讲到这里，下面我们来讲讲组件的调用，最爱组件了。 [b]组件的使用[/b] 组件（Component）是 vue.js 最强大的功能之一，当你发现使用组件可以减少造轮子里，你会深深的爱上它。 我们的组件都是放在[code]components[/code]目录下的，调用组件的方法也很简单。 然后记得在*.vue注册导入的组件，要不然会影响使用。 如果想要干净的组件模板，可以到根目录的tpl里找到components_tpl的Hello.vue文件，复制粘贴到components目录下马上就可以进行开发了。 [b]图标字体[/b] 在yaoyao1987童鞋里，是没有打包构造图标字体的代码逻辑，这也是我优化上去的一部分，建议使用[code]iconfont[/code]图标（[url=http://www.iconfont.cn]http://www.iconfont.cn[/url]） ，强大到无所不能，可以到[code]iconfont[/code]下载自己想要的图标字体，记得是把文件放到[code]\src\assets\font[/code]文件夹里。 [code]webpack[/code]会自动打包的，无需理会，另外还有一点，[code]iconfont[/code]提供的css文件，复制到[code]\src\assets\css.css[/code]文件即可，要不然没有效果哈。 在[code]*.vue[/code]里使用调用就行了。 [b]构建代码说明[/b] 那我们使用的是vue-cli的手脚架，用过[code]vue+cli[/code]的朋友知道主要构建代码都放在根目录[code]build[/code]下，vue多页面主要修改了这三个JS文件[code]webpack.base.conf.js[/code]、[code]webpack.dev.conf.js[/code]、[code]webpack.prod.conf.js[/code] 这里还要做一个特别说明，我们每次更新资源文件，为了去缓存，都会给文件生成hash值，例如： 这两者都是为了去缓存，唯一的区别的生成的文件名不一样，有些项目，为了可以能出严重BUG时第一时间回滚，以[code]文件名[/code]+[code]hash[/code]的方式储存，每次生成都不会覆盖之前的代码，以方便查BUG或者回滚。 另一种方式，就是以[code]文件名[/code]+[code]?hash[/code]的方式储存，每次都会覆盖之前生成的资源，方便在某些特殊项目使用。 我在[code]webpack.base.conf.js[/code]也已经注释说明了。 [b]结束言[/b] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。