快捷導(dǎo)航

詳解vue-cli3多頁應(yīng)用改造

更新時(shí)間：2019年06月04日 11:01:28 作者：zimoon

這篇文章主要介紹了詳解vue-cli3多頁應(yīng)用改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

需求

一個(gè)平臺(tái)P，包含產(chǎn)品a、b、c、d、e。各產(chǎn)品UI樣式風(fēng)格統(tǒng)一，且會(huì)用到公共配置（HOST、是否添加埋點(diǎn)js）、組件（頭部導(dǎo)航、表格、搜索框）、方法（請(qǐng)求攔截、生成UUID）。

現(xiàn)狀：由于歷史遺留原因，各產(chǎn)品為獨(dú)立SPA、各自維護(hù)，配置、組件也都自成一體，只是大概樣式上保持了一致，但細(xì)節(jié)（比如同一面包屑樣式，左邊距5px、8px都有）都不一致。
這種情況下，改組件、改配置都得一改改多個(gè)地方，且有些項(xiàng)目是vue-cli2、有些是vue-cli3，項(xiàng)目間依賴包的版本也不一致，維護(hù)起來非常不友好。

目標(biāo)：整合各產(chǎn)品單頁應(yīng)用為MPA，提取公共文件（主題、配置、組件、方法），減少規(guī)范性東西的維護(hù)成本。

目錄結(jié)構(gòu)對(duì)比

整合前

bds-bank-fe
│  README.md
│
│// 靜態(tài)資源輸出目錄
│
└───dist
│  └───index.html + static // 平臺(tái)首頁
│  └───label // 產(chǎn)品a
│  │  └───index.html + static
│  └───metrics // 產(chǎn)品b
│  └───service // 產(chǎn)品c
│  └───help // 產(chǎn)品d
│
│// 項(xiàng)目路徑
│
└───help-center // 產(chǎn)品d
└───portal-page // 平臺(tái)首頁
└───service-doc // 產(chǎn)品c
└───unify-label // 產(chǎn)品a
└───unify-metrics // 產(chǎn)品b
│  └───build
│  └───config
│  └───src

整合后

│// 靜態(tài)資源輸出目錄
│
└───dist
│  └───index.html
│  └───label.html
│  └───metric.html
│  └───service.html
│  └───stocktake.html
│  └───css
│  └───js
│  └───img
├── public
│  └───favicon.ico
│  └───index.html
│
│// 項(xiàng)目路徑
│
├── src
│   └── assets
│   └── components
│   ├── pages
│     ├── index
│     ├── label
│     ├── metric
│     ├── service
│     ├── stocktake

實(shí)現(xiàn)

vue-cli 3.0官方支持多頁，重點(diǎn)在于vue.config.js文件中pages這個(gè)配置項(xiàng)，每個(gè)頁面單獨(dú)配置entry、template、filename等。pages配置說明

// 官網(wǎng)示例如下
module.exports = {
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板來源
   template: 'public/index.html',
   // 在 dist/index.html 的輸出
   filename: 'index.html',
   // 當(dāng)使用 title 選項(xiàng)時(shí)，
   // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
   // 提取出來的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 當(dāng)使用只有入口的字符串格式時(shí)，
  // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
  // 并且如果找不到的話，就回退到 `public/index.html`。
  // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
  subpage: 'src/subpage/main.js'
 }
}

Step1: 創(chuàng)建新項(xiàng)目

選擇需要的Babel、Router、Vuex、eslint...

具體步驟參考官網(wǎng)：創(chuàng)建一個(gè)項(xiàng)目

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

在根目錄下新建public文件夾，包含favicon.ico和index.html兩個(gè)文件。

index文件內(nèi)容如下：

<!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-公共服務(wù)平臺(tái)</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：以下內(nèi)容非生成多頁應(yīng)用必須配置
 lintOnSave: true,
 productionSourceMap: false,
 chainWebpack: config => {
  /**
   * 自動(dòng)化導(dǎo)入文件
   */
  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: 拷貝原項(xiàng)目src目錄至pages下，大概長(zhǎng)這樣