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中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
JavaScript基础之this详解
Jun 04 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
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代码
2013/12/03 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python pandas 时间日期的处理实现
2019/07/30 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
入党自我评价优缺点
2014/01/25 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
基于Python实现射击小游戏的制作
2022/04/06 Python
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫