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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
vue实现户籍管理系统
May 29 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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
无线电广播的开始
2002/01/30 无线电
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
Vue路由前后端设计总结
2019/08/06 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python之py2exe打包工具详解
2017/06/14 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
哈理工毕业生的求职信
2013/12/22 职场文书
中学生自我评价范文
2014/02/08 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
Web应用开发TypeScript使用详解
2022/05/25 Javascript