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

公司使用 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项目添加多页面配置的步骤详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • vue 配置多页面应用的示例代码

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用. 1. 新建 vue 项目 vue init webpack vue_multiple_test cd vue_multiple_test npm install 2. 安装 glob npm i glob --save-dev glob 模块用于查找符合要求的文件 3. 目

  • WebPack配置vue多页面的技巧

    WebPack虐我千百遍,我带她如初恋.一个项目前台页面写差不多了,webpack几乎零配置,也算work起来了.现在需要编写后台管理界面,另起一个单独的项目,那是不存在的.于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改来修改去的.像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了... 于是就有了这个笔记: 先看看项目的结构: ├── build ├── config ├── src │   ├── api │   ├──

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

  • vue配置多页面的实现方法

    1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org ③安装webpack npm install webpack -g ④安装vue-cli脚手架 npm install -g vue-cli ⑤创建项目模板 vue init wepack vue-multipage-demo ⑥cmd进入到要放项目的文件夹 ⑦安装 cnpm inst

  • vue 2.8.2版本配置刚进入时候的默认页面方法

    vue --version查看版本 是 2.8.2: vue 2.8.2版本配置刚进入时候的默认页面比如这里面的goods页面: 1.在路由文件下里面的index.js文件 添加 { path: '/', redirect: '/goods/goods' }, // 默认就跳转此页面 2.也可以在app.vue里面配置 this.$router.push('/goods/goods'); // 页面加载时跳转 详情看下面 export default { name: 'app', compone

  • mpvue 单文件页面配置详解

    前言 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件: index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中 其中,每个页面的 main.js 文件基本都是一致的,可通过mpvue-entry来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue

随机推荐