VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 详解vue-cli3多页应用改造

    需求

    一个平台P,包含产品a、b、c、d、e。各产品UI样式风格统一,且会用到公共配置(HOST、是否添加埋点js)、组件(头部导航、表格、搜索框)、方法(请求拦截、生成UUID)。

    现状:由于历史遗留原因,各产品为独立SPA、各自维护,配置、组件也都自成一体,只是大概样式上保持了一致,但细节(比如同一面包屑样式,左边距5px、8px都有)都不一致。
    这种情况下,改组件、改配置都得一改改多个地方,且有些项目是vue-cli2、有些是vue-cli3,项目间依赖包的版本也不一致,维护起来非常不友好。

    目标:整合各产品单页应用为MPA,提取公共文件(主题、配置、组件、方法),减少规范性东西的维护成本。

    目录结构对比

    整合前

    bds-bank-fe
    │  README.md
    │
    │// 静态资源输出目录
    │
    └───dist
    │  └───index.html + static // 平台首页
    │  └───label // 产品a
    │  │  └───index.html + static
    │  └───metrics // 产品b
    │  └───service // 产品c
    │  └───help // 产品d
    │
    │// 项目路径
    │
    └───help-center // 产品d
    └───portal-page // 平台首页
    └───service-doc // 产品c
    └───unify-label // 产品a
    └───unify-metrics // 产品b
    │  └───build
    │  └───config
    │  └───src

    整合后

    │// 静态资源输出目录
    │
    └───dist
    │  └───index.html
    │  └───label.html
    │  └───metric.html
    │  └───service.html
    │  └───stocktake.html
    │  └───css
    │  └───js
    │  └───img
    ├── public
    │  └───favicon.ico
    │  └───index.html
    │
    │// 项目路径
    │
    ├── src
    │   └── assets
    │   └── components
    │   ├── pages
    │     ├── index
    │     ├── label
    │     ├── metric
    │     ├── service
    │     ├── stocktake

    实现

    vue-cli 3.0官方支持多页,重点在于vue.config.js文件中pages这个配置项,每个页面单独配置entry、template、filename等。pages配置说明

    // 官网示例如下
    module.exports = {
     pages: {
      index: {
       // page 的入口
       entry: 'src/index/main.js',
       // 模板来源
       template: 'public/index.html',
       // 在 dist/index.html 的输出
       filename: 'index.html',
       // 当使用 title 选项时,
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
       title: 'Index Page',
       // 在这个页面中包含的块,默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
       chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      // 当使用只有入口的字符串格式时,
      // 模板会被推导为 `public/subpage.html`
      // 并且如果找不到的话,就回退到 `public/index.html`。
      // 输出文件名会被推导为 `subpage.html`。
      subpage: 'src/subpage/main.js'
     }
    }

    Step1: 创建新项目

    选择需要的Babel、Router、Vuex、eslint...

    具体步骤参考官网:创建一个项目

    Step2: 修改配置文件vue.config.js

    在根目录下新建public文件夹,包含favicon.ico和index.html两个文件。

    index文件内容如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
      <title>P-公共服务平台</title>
    </head>
    <body>
    <noscript>
      <strong>
        We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
    </html>

    然后,在根目录下新建vue.config.js

    const glob = require('glob')
    const path = require('path')
    const resolve = (dir) => path.join(__dirname, dir)
    
    const PAGES_PATH = './src/pages/*/*.js'
    
    module.exports = {
     pages: setPages(),
     // TODO:以下内容非生成多页应用必须配置
     lintOnSave: true,
     productionSourceMap: false,
     chainWebpack: config => {
      /**
       * 自动化导入文件
       */
      const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
      types.forEach(
       type => addStyleResource(config.module.rule('less').oneOf(type)))
      /**
       * 添加别名
       */
      config.resolve.alias
       .set('@index', resolve('src/pages/index'))
       .set('@label', resolve('src/pages/label'))
       .set('@metrics', resolve('src/pages/metric'))
       .set('@service', resolve('src/pages/service'))
       .set('@stocktake', resolve('src/pages/stocktake'))
      /**
       * 菜单icon处理为svg-sprite
       */
      config.module
       .rule('svg')
       .exclude
       .add(resolve('src/assets/icons/menus'))
       .end()
      config.module
       .rule('svg-sprite-loader')
       .test(/\.svg$/)
       .include
       .add(resolve('src/assets/icons/menus')) // 处理目录
       .end()
       .use('svg-sprite-loader')
       .loader('svg-sprite-loader')
       .options({
        symbolId: 'icon-[name]'
       })
     }
    }
    
    /**
     * 组装页面
     */
    function setPages () {
     let pages = {}
     glob.sync(PAGES_PATH).forEach(filepath => {
      let fileList = filepath.split('/')
      let fileName = fileList[fileList.length - 2]
    
      pages[fileName] = {
       entry: filepath,
       template: 'public/index.html',
       filename: `${fileName}.html`,
       // title:
       chunks: ['chunk-vendors', 'chunk-common', fileName]
      }
     })
     return pages
    }
    
    /**
     * 注入公共less
     * @param rule
     */
    function addStyleResource (rule) {
     rule.use('style-resource')
      .loader('style-resources-loader')
      .options({
       patterns: [
        path.resolve(__dirname, 'src/assets/styles/variable.less')
       ]
      })
    }

    Step3: 拷贝原项目src目录至pages下,大概长这样

    Step4: 各产品原项目下package.json依赖包都挪到根目录下package.json,重新安装

    PS:由于依赖向上升级,某些老版本依赖包可能会存在升级引发的问题,需要细心走查一遍。这里由于业务不一样,就不详细赘述了

    然后npm start,完美启动~

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • 基于vue-cli3多页面开发apicloud应用的教程详解
    • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
    • 手把手教你vue-cli单页到多页应用的方法
    • vue-cli创建的项目,配置多页面的实现方法
    • vue-cli实现多页面多路由的示例代码
    • 详解如何使用 vue-cli 开发多页应用
    • 详解如何将 Vue-cli 改造成支持多页面的 history 模式
    • Vue-cli创建项目从单页面到多页面的方法
    • 详解vue-cli多页面工程实践
    • vue-cli单页应用改成多页应用配置详解

    广而告之:
    热门推荐:
    php+ajax实现异步上传文件或图片功能

    本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交"> </for···

    iis6上使用.htaccess文件,ISAPI_Rewrite的安装及使用

    在Apache上很有用的.htaccess文件在IIS上就没有,要想实现类似的跳转功能可以使用ISAPI_Rewrite来代替,这是一个专门为IIS设置的工具,目的就是代替.htaccess实现很多功能,其中最常用的就是301转向和伪静态。准确来说它应该是代替Apache上的mod_Rewrite,还不能够完全代替.h···

    php获取文章内容第一张图片的方法示例

    本文实例讲述了php获取文章内容第一张图片的方法。分享给大家供大家参考,具体如下: <?php $temp=mt_rand(1,4); $pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/"; $content = $article->Cont···

    JQuery特殊效果和链式调用操作示例

    本文实例讲述了JQuery特殊效果和链式调用操作。分享给大家供大家参考,具体如下: JQuery的特殊效果 fadeOut()淡入 fadeToggle()切换淡入淡出 hide() 隐藏元素 show() 现实元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle()依次展开或···

    php+ajax实现商品对比功能示例

    本文实例讲述了php+ajax实现商品对比功能。分享给大家供大家参考,具体如下: 商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){ var n=10; var obj=document.getElementById("goods-compare"); if(!obj){ return false; } var x=0; windo···

    三个CSS技巧你应该知道

    各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让···

    php自动获取关键字的方法

    本文实例讲述了php自动获取关键字的方法。分享给大家供大家参考。 具体实现方法如下: 复制代码 代码如下:$mincipin=5;//最小词频 $minlen=4;//关键字最小长度 tiqukeyword($tiqustr,$minlen,$mincipin); function tiqukeyword($tiqustr,$minlen,$mincipin) {$strlong=strl···

    Laravel admin实现消息提醒、播放音频功能

    应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}} <audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.chi···

    帝国cms后台标题字数截取问题

    打开e/data/html/list/listinfo.php 打开e/data/html/list/alllistinfo.php 找到$r[title]=stripSlashes(sub($r[title],0,50,false)); 修改50即可

    Node.JS段点续传:Nginx配置文件分段下载功能的实现方法

    Html5 提供了一个新的 Range 标签来实现文件的分段下载。在Node.JS中可以配置这个标签来实现文件的分段下载。 Header标签 请求 Request Header: 下载 3744 以后的文件内容 range: bytes=3744- 返回 Response Header: 文件总长 15522643 个字节 accept-ranges': 'bytes' conte···