交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 详解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单页应用改成多页应用配置详解

    广而告之:
    热门推荐:
    基于 Bootstrap Datetimepicker 联动

    先看一下 层级联动的案例 先选择前面时间后  后面的时间不要超过前面的时间 先选择后面的时间后,前面的时间不要少于后面的时间 下面看封装代码 function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(startTime).datetimepicker("remove"); ···

    设计理论:文字的辨识度与可读性

    不久前因业务需要,我在自己的笔记本中安装了搜霸。当时一个做平面的朋友过来和我做一些设计交流,我在笔记本前准备输入一个网址,他靠近我的电脑,大叫道:“嗷!你也认识我的老同学“高亮”啊!”我惊出一身冷汗。 几乎所有的产品中,都会使用到文字。小···

    介绍抢注域名的流程、用途及对网站优化的好处

    作为SEO人员,我们非常清楚网站域名的积极作用。它通常代表一个站点的有形资源,尤其是具有丰富外部资源和良好质量的域名。在匆忙通过域名注册后,价格一路上涨。  什么是域名抢注?  简单理解:所谓域名抢占是由于某种原因,某个特定的域名已经过期,而···

    Ubuntu中搭建Nodejs开发环境过程分享

    系统环境: Ubuntu 12.04 LTS 64bit 一、 通过apt-get安装nodejs – 失败(可以下面的看源码安装方法): 复制代码 代码如下:~ sudo apt-get install nodejs~ sudo apt-get install npm ~ node -vv0.6.12 ~ npm -v1.1.4创建工作目录复制代码 代码如下:~ mkdir worksp···

    PHP实现的通过参数生成MYSQL语句类完整实例

    本文实例讲述了PHP实现的通过参数生成MYSQL语句类。分享给大家供大家参考,具体如下: 这个类可以通过指定的表和字段参数创建SELECT ,INSERT , UPDATE 和 DELETE 语句。 这个类可以创建SQL语句的WHERE条件,像LIKE的查询语句,使用LEFT JOIN和ORDER 语句 <?php /* **···

    Mobile Web开发基础之四--处理手机设备的横竖屏问题

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,···

    破解md5加密扫描程序(适合扫描弱密码)[

    *{font-family:宋体;font-size:10pt} body{text-align:center} .txt{border:1px groove gray} 破解md5加密扫描程序(适合扫描弱密码) 请输入32位md5密文: 扫描密码选项 数字扫描密码 字母扫描密码 字母和数字混合扫描密码 随机扫描密码 自定义扫描密码···

    jquery插件bootstrapValidator数据验证详解

    因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。 bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载···

    将查询条件的input、select清空

    将input、select清空 复制代码 代码如下: var inputObjs=jQuery("#queryAdvancedDiv input[type='text']"); for(var i=0;i<inputObjs.length;i++){ var inputObj = inputObjs[i]; inputObj.value=""; } var selectObjs = jQuery("#queryAdvancedDiv select"); for(var···

    html Meta标签小集

    <Head>……</head>表示是<HTML>的文件头部,用来说明文件命名和与文件本身的相关信息。通常这部分标签是声明此网页的:默认语言编码、关键字、使用软件等。    Meta标签可分为两大部分,HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAM···