溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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多頁應用改造的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
