vue-cli3多页应用改造

栏目: JavaScript · 发布时间: 5年前

内容简介：一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vue-cli3，项目间依赖包的版本也不一致，维护起来非常不友好。

需求

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

现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。

这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vue-cli3，项目间依赖包的版本也不一致，维护起来非常不友好。

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

目录结构对比

整合前

vue-cli3多页应用改造

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

整合后

vue-cli3多页应用改造

│// 静态资源输出目录
│
└───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两个文件。

vue-cli3多页应用改造

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">
    <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下，大概长这样

vue-cli3多页应用改造

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

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

然后npm start，完美启动～

以上所述就是小编给大家介绍的《vue-cli3多页应用改造》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

算法学

哈雷尔 / 第1版 (2006年2月1日) / 2006年2月1日 / 38.0

本书的意图在于按序学习或研究，而不是作为一个参考。因而按照每章依赖于前面章节的结构组织本书，且流畅易读。第一部分预备知识中的大部分材料对于那些具有程序设计背景的人是熟悉的。无论是否恰当，本书包含了计算机科学家当前感兴趣的研究专题的简明讨论。这本教科书的书后有每章详细参考书目的注记，并通过“后向”指针把教科书中的讨论与相关文献联系起来。目前的版本包含大量习题，以及大约三分之一的题解。可用题解作为教科......一起来看看《算法学》这本书的介绍吧!

码农工具

vue-cli3多页应用改造

需求

目录结构对比

整合前

整合后

实现

Step1: 创建新项目

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

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

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

算法学

JS 压缩/解压工具

随机密码生成器

MD5 加密