进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（上篇）

前端爱好者的知识盛宴

嗨

这里是IMWEB

一个想为更多的前端人

享知识

助发展

觅福利

有情怀有情调的公众号

欢迎关注转发

让更多的前端技友一起学习发展~

本文作者：鹅厂高级工程师--郑高强

文章来源：http://www.cnblogs.com/kenkofox

导语

一般来说，使用vue做成单页应用比较好，但特殊情况下，需要使用多页面也有另外的好处。例如手Q的多webview架构，新开页面有利于ios右划返回，也避免了返回时页面的刷新。

所以，这里我们探讨一下如何配置实现多页面的项目框架。这里是开篇，先以最简单的纯前端多页面为例入手，最终目标是完成Node.js多页面直出前后端同构的架构。

本文源代码：https://github.com/kenkozheng/HTML5_research/tree/master/Vue-Multipages-Webpack3

也是实现纯前端多页面的步骤

•vue-cli创建框架

•分析原型项目配置

•多页面化改造

正文

1.利用vue-cli搭建基本的框架

vue-cli是官方提供的脚手架工具，快速建立原型项目。

•安装vue-cli：npm i -g vue-cli

•初始化项目：vue init <template-name> <project-name>

这里我选择最简单的template：webpack-simple。先创建项目目录，然后在目录内运行vue init webpack-simple，一路yes下去

然后，我们会得到这样的目录结构：

•babelrc是babel的配置文件，详细看babel自身的介绍

•editorconfig控制编辑器的文字样式之类的，可以删掉

•gitignore是git的配置

•index.html就是单页面的html

•webpack.config.js已经区分了开发环境还是生产环境，生产环境加上uglify混淆

•src目录中包括了页面的vue单文件（组件）和主入口main.js

2.运行分析原型项目

vue-cli把project.json、webpack配置还有npm脚本都准备好了，很赞。

我们只需要两步即可运行项目

行npm run dev就可以启动默认的在8080端口监听的服务器，带有webpack热更新全家桶，非常方便。不过，我们需要看懂里边所有源码，才能进行下一步的操作。

>.babelrc

细节的配置很多，原型项目使用了env这个插件，并设置module相关的语法不转义（留给webpack处理）

>webpack.config.js

entry可以为数组或对象或单个字符串，指定需要打包的文件； output指定打包后输出的信息。这里最好参考官方文档，实在不行就看源码，各种网上文章可能都会说错，包括我这一篇。

官方文档：https://doc.webpack-china.org/concepts/output/

关键点是，filename可以用[name].[hash:8]等关键字的方式实现根据entry输入而动态变化的文件名，后续会用到。 path和publicPath需要重点区分一下。

•path指的是打包后输出的文件目录

•publicPath指的是path中生成的文件，对应的外网访问地址，需要根据最终发布后项目实际如何部署来填写，开发和生产两个环境可能不一样路径。例如打包了一个图片放到./dist/img1.jpg，那么响应js中的引用路径变成/dist/img1.jpg。两个参数要配合好。

再看看module，这里从2.x开始就改了格式，一目了然，就是各种文件应该使用什么loader去加载处理。主要需要关心最后这个file-loader，name要跟之前publicPath配合好，除了写文件名还可以写目录，webpack会自动创建目录存放文件。

resolve的alias目的是做一个别名映射，当代码中出现vue$时，可以动态替换为对应的字符串。 devServer控制webpack自带的热更新服务器的行为，例如修改一下端口。使用npm脚本运行：webpack-dev-server --open --hot。需要注意的是，devserver使用memory-fs，并不直接写文件系统。配合WriteFilePlugin可以强制写入。如果不使用devserver调试，例如fiddler替换，就需要强制写入文件系统了。 performance可以先略过 devtool是控制生成的源代码source-map功能，按照默认即可，具体的使用原理简单说，就是浏览器支持的混淆后代码映射到源文件的映射表。