详解vue-cli3多页应用改造

更新时间：2019年06月04日 11:01:28 作者：zimoon

这篇文章主要介绍了详解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项目启动报错解决方法大全
这篇文章主要给大家介绍了关于Vue项目启动报错解决方法的相关资料,文中通过图文将解决的过程介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
vue3中defineComponent 的作用详解
这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
vue3.0中的双向数据绑定方法及优缺点
这篇文章主要介绍了vue3.0中的双向数据绑定方法，文中通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue实现验证码登录的方法实例
最近在自己写页面,然后写登录注册UI的时候需要一个验证码组件,去搜一下没找到什么合适的,于是自己写一个,这篇文章主要给大家介绍了关于Vue实现验证码登录的相关资料,需要的朋友可以参考下
2022-03-03
简单学习5种处理Vue.js异常的方法
这篇文章主要介绍了简单学习5种处理Vue.js异常的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
深入详解Vue3 ref底层实现原理
随着现在vue3越来越普及，相应的面试题也多了起来。说到vue3的面试题，有一个最经典的就是对于实现ref和reactive这两个方法的底层原理，本文就来和大家简单讲讲吧
2023-04-04
vue中使用scrollTo无效的解决方法
本文主要介绍了vue中使用scrollTo无效的解决方法，想要使用scrollTo使当前网页滚动到指定位置，本文就来解决一下，具有一定的参考价值，感兴趣的可以了解一下
2023-08-08
vue3整合SpringSecurity加JWT实现登录认证
本文主要介绍了vue3整合SpringSecurity加JWT实现登录认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-04-04
vue父组件点击触发子组件事件的实例讲解
下面小编就为大家分享一篇vue父组件点击触发子组件事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue再次进入页面不会再次调用接口请求问题
这篇文章主要介绍了vue再次进入页面不会再次调用接口请求问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08

详解vue-cli3多页应用改造

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具