一、首先看一下webpack中如何设置页面的title
1、webapck主要是利用HtmlWebpackPlugin 替换 html页面 的 title，在vue项目中，安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
安装成功后，
package.json
这个文件会多出一行
"html-webpack-plugin":"xxxx",
2、在webpack配置的plugins中实例化插件，设置标题名称就可以了
new HtmlWebpackPlugin({
template: './src/index.ejs',
filename: './index.html',
title: "标题名称",
favicon: "",
inject: false,
hash: true
上面介绍的是在webpack中设置标题的基本用法
二、动态设置页面title
1、安装依赖，使用vue-wechat-title插件
npm install vue-wechat-title -save
2、在main.js中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3、在router对应的js路由上加上对应title的参数
4、然后在我们的入口文件index.vue或者app.vue里面去实现它
5、如果是公共组件，在跳转时根据条件来动态设置title，可以在最外层的div上设置v-wechat-title="$route.meta.title"再动态去改变title即可
npm run dev重启项目即可， 好啦 一个动态的title就生成啦
共同进阶学习
学习之余，大家一起来薅羊毛喽，各取所需。
vue2 多页配置实例
基于vue2 + vue-router + vuex而组成的多页配置实例
多页实例中包含 纯单页, 基于 vue-router 的单页, 基于 vue-router + vuex 的单页, 多种模式自由组合
在 module 文件夹中只留一个模块, 就变成 纯SPA
所有模块均带修改head里的title, 所有模块也都包含ajax例子, 任何不带ajax的例子都是耍流氓
vuex模块带有懒加载
DEMO:
fork demo
$ git clone
// 安装依赖
$ yarn
// 生产模式
$ yarn build
// 开发模式
$ yarn serve
// eslint 检测
$ yarn lint
/dist/ = webpack编译后生成文件目录
/src/api/ = axios配置目录
原文链接：webpack学习教程（二）： 起步mp.weixin.qq.com前言上一篇文章我们介绍了webpack的5个基本概念，没有看过的小伙伴可以从下面链接进入。webpack学习教程（一）： 基础概念mp.weixin.qq.com环境安装想要学习wbepack，我们首先需要以下工具和环境：node.js 最新版本，官网链接：https://nodejs.org/zh-cn/；npm包...
①如果需要动态设置页面的title，可以直接使用document.title；②可以使用router的beforeEach去统一设置，这种方法使用每个页面都是固定的标题，在进入路由就赋值标题，进入路由后就不修改了。
test: { ... }
接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpackPlugin使用config.title
new HtmlWebpackPlugin({
title: c
注意：网上很多教程说需要在build目录下的dev-server.js文件中配置，但目前最新的vue-cli是没有dev-server.js这个文件的，因为已经被合并到webpack.dev.conf.js文件中，所以直接在该文件中配置即可
1、在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文件
dir.png
posts.json
code: 200,
data: [
id: 0,
title: 复联3大陆定档5月11日，全球最晚!!
id: 1,
title: 蚁人2最新预告发布
本文使用「署名 4.0 国际 (CC BY 4.0)」 许可协议，欢迎转载、或重新修改使用，但需要注明来源。作者: 百应前端团队 @双鱼https://juejin.im/user/30...
第 9 阶段：搞懂、搞透前端构建第5天，昨天内容详细介绍了 webpack 的 plugin，非常重要：搞定 webpack 的 plugin 不在话下在前面的课程中，我们都是手动创...
这里，我们还可以为这个命令传入一个**–open**的参数，它可以用于去自动唤起浏览器，去打开我们的运行地址，打开浏览器过后（如果说你有两块屏幕的话），你就可以把浏览器放到另外一块屏幕当中，然后，我们去体验这种一边编码，一边即时预览的开发环境了。这个工具可以直接解决我们之前的问题。例如在应用程序的运行过程中，修改了某个模块，通过自动刷新就会导致整个应用整体的刷新，页面中的状态信息都会丢失掉，而如果这个地方使用的是热替换的话，就可以实现只将刚刚修改的这个模块实时的去替换到应用当中，不必去完全刷新应用。
