需求

一個(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ù)起來(lái)非常不友好。

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

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

整合前

bds-bank-fe

│ README.md

│

│// 靜態(tài)資源輸出目錄

│

└───dist

│ └───index.html + static // 平臺(tái)首頁(yè)

│ └───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)首頁(yè)

└───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官方支持多頁(yè)，重點(diǎn)在于vue.config.js文件中pages這個(gè)配置項(xiàng)，每個(gè)頁(yè)面單獨(dú)配置entry、template、filename等。pages配置說(shuō)明

// 官網(wǎng)示例如下

module.exports = {

pages: {

index: {

// page 的入口

entry: 'src/index/main.js',

// 模板來(lái)源

template: 'public/index.html',

// 在 dist/index.html 的輸出

filename: 'index.html',

// 當(dāng)使用 title 選項(xiàng)時(shí)，

// template 中的 title 標(biāo)簽需要是

title: 'Index Page',

// 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含

// 提取出來(lái)的通用 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)容如下：

P-公共服務(wù)平臺(tái)

We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.

然后，在根目錄下新建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è)應(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]'

})

}

}

/**

* 組裝頁(yè)面

*/

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)這樣

Step4: 各產(chǎn)品原項(xiàng)目下package.json依賴包都挪到根目錄下package.json，重新安裝

PS：由于依賴向上升級(jí)，某些老版本依賴包可能會(huì)存在升級(jí)引發(fā)的問(wèn)題，需要細(xì)心走查一遍。這里由于業(yè)務(wù)不一樣，就不詳細(xì)贅述了

然后npm start，完美啟動(dòng)～

總結(jié)

以上是生活随笔為你收集整理的vuecli3修改html,vue-cli3多页应用改造的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。