vue项目添加多页面配置的步骤详解


Posted in Javascript onMay 22, 2019

公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置。看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面。而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的。

最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结,方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话,那就更好了。

实现步骤

1.添加新增入口相关文件;
2.使用变量维护多入口;
3.开发环境读取多入口配置;
4.生产环境读取多入口配置;

新增入口相关文件

在 src 目录下新增一个 page1 文件夹,新建新页面的所需的相关文件(入口文件、HTML模板文件等)。我这边直接 vue-cli 初始化创建相关文件复制了一份到 page1 文件夹下。如下:

├─App.vue
├─main.js
├─page1.html // 这里模板文件名称需要与文件夹名称相同,方便输出模板读取
├─router
|  └index.js
├─components
|   └HelloWorld.vue
├─assets
|  └logo.png
page1/router/index.js 需要对该页面的所有路由添加同文件夹名的公共路径,用于解析: 
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 这里也需要留意
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: '/',
 routes: [
  {
   path: '/page1/',
   redirect: '/page1/index'
  },
  {
   path: '/page1/index',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

使用变量维护多入口

我们在项目目录下的 build/utils.js 的最后 exports 一个指定多入口的对象。如下:

// 这里,每个属性就是一个页面配置,指定该页面的入口文件
// 如果需要添加,只需多增加一个属性
// 属性名必和html模板文件名、目录名称相同
exports.multipleEntrys = {
 page1: './src/page1/main.js'
}

之所以使用 build/utils.js ,是因为该文件在 webpack.base.conf.js 、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用导入。

开发环境读取多入口配置

首先,在 build/webpack.base.conf.js 中,我们把上面定义的入口添加进 entry 配置:

entry: {
  app: './src/main.js',
  ...utils.multipleEntrys // entry添加该行
 }

然后,在 build/webpack.dev.conf.js 添加路径解析和多页面输出:

// 添加解析,将historyApiFallback的属性修改如下:
  historyApiFallback: {
   rewrites: [
    // 将所有多入口遍历成路径解析项
    ...((()=>{
     let writes = []
     for(let prop in utils.multipleEntrys){
      // 使用属性名匹配为正则
      // 这就是上面“需要对该页面的所有路由添加同文件夹名的公共路径”的原因
      let reg = new RegExp(`^/${prop}/`) 
      writes.push({
       from: reg,
       // 使用属性名读取模板文件
       // 这就是上面“模板文件名称需要与文件夹名称相同”的原因
       to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
      })
     }
     return writes
    })()),
    // 匹配所有路径一定要在最后,否则该匹配之后的项,不会被执行
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') } 
   ],
  }
// 在已经的HtmlWebpackPlugin中添加chunks配置,否则默认页面会注入所有页面的js文件
...
plugins: [
  ...
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   // 增加此行,
   // 'app'为默认入口名称,如果你的默认入口不是'app'
   // 则这里需要替换
   chunks: ['manifest', 'vendor', 'app']
  })
  ...
]
...
// 在`devWebpackConfig`定义之后,紧接着添加多页面输出:
for(let prop in utils.multipleEntrys){
 devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
  filename: `${prop}.html`,
  // html模板路径,使用属性名作为文件夹名称
  // 这是新页面文件夹名称需要和多入口配置变量属性名相同的原因
  template: `./src/${prop}/${prop}.html`, 
  inject: true,
  chunks: ['manifest', 'vendor', prop],
 }))
}

最后,添加多页面相互跳转链接:

<!-- src/components/HelloWorld.vue -->
...
<a href="/page1/index" rel="external nofollow" >to page B</a> 
...

<!-- src/page1/components/HelloWorld.vue -->
...
<a href="/" rel="external nofollow" >to page A</a> 
...
<!-- 这里由于是多个页面的跳转,所以不能再使用router-link标签,需要使用a标签 -->

到这里,开发环境的多页面配置已经完成,重新 npm run dev 一下,即可多页面跳转。

生产环境读取多入口配置

首先,在 webapck.prod.config.js 中添加多页面输出。

// 在已经的HtmlWebpackPlugin中添加chunks配置,否则默认页面会注入所有页面的js文件
...
plugins: [
  ...
  new HtmlWebpackPlugin({
   ...
   chunks: ['manifest', 'vendor', 'app'] // 增加此行
   ...
  })
  ...
]
...
// build/webapck.prod.config.js的webpackConfig定义后紧接着添加
for(let prop in utils.multipleEntrys){
 webpackConfig.plugins.push(new HtmlWebpackPlugin({
  filename: `${prop}.html`,
  template: `./src/${prop}/${prop}.html`,
  inject: true,
  chunks: ['manifest', 'vendor', prop],
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
 }))
}

然后,开发环境不同路径指向不同输出文件是由 historyApiFallback 来处理的,生产就需要在 web服务 中将不同路径指向打包后的不同文件。这里以 nginx 为例,配置如下:

server {
  listen    92 default_server;
  listen    [::]:92 default_server;
  server_name _;
  root     D:\vue-multi-entry\dist;
  location / {
      try_files $uri $uri/ /index.html;
  }
  location /page1/ {
      try_files $uri $uri/ /page1.html;
  }
}

以上,整个多页面的配置就已经完成。这里是 完整demo

关于webpack4.x版本的差异

如果你使用的是 webpack4.x 版本,关于 webapck.prod.config.js 中 chunks 配置的顺序就是这样的: [prop, 'manifest', 'vendor']

总结

以上所述是小编给大家介绍的vue项目添加多页面配置的步骤详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
vue elementUI table 自定义表头和行合并的实例代码
May 22 #Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 #Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 #Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 #Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
You might like
php上的memcache和memcached两个pecl库
2010/03/29 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
清洁工岗位职责
2014/01/29 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
生日寄语大全
2014/04/08 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
学生犯错保证书
2015/05/09 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL