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 相关文章推荐
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
vue中template的三种写法示例
Oct 21 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
python处理大数字的方法
2015/05/27 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Numpy中的mask的使用
2018/07/21 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
《值日生》教学反思
2014/02/17 职场文书
文明村镇申报材料
2014/05/06 职场文书
英文感谢信范文
2015/01/21 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
《学会看病》教学反思
2016/02/17 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python