創(chuàng)建項(xiàng)目
使用 vue-cli 創(chuàng)建一個(gè)項(xiàng)目
$ vue init webpack vue-multiple-demo
根據(jù)控制臺(tái)的提示，填寫相關(guān)信息即可。創(chuàng)建完成后，進(jìn)入該項(xiàng)目根目錄并安裝依賴。
$ cd vue-multiple-demo $ npm install
由于是開發(fā)多頁(yè)面應(yīng)用，該工程就沒(méi)有配置 vue-router。最簡(jiǎn)示例
通過(guò) vue-cli 創(chuàng)建的項(xiàng)目，默認(rèn)是開發(fā)單頁(yè)應(yīng)用。如果希望開發(fā)多頁(yè)面，需要調(diào)整部分腳本的配置。
入口
在 src 目錄下新建一個(gè) demo.js，為方便起見，直接將 main.js 中的內(nèi)容復(fù)制過(guò)去。然后，修改 build/webpack.base.conf.js 的 entry 為多個(gè)。
entry: {
app: './src/main.js',
demo: './src/demo.js'
},模板
在工程根目錄下新建一個(gè) demo.html 文件，同樣將 index.html 的內(nèi)容復(fù)制過(guò)去。為了區(qū)分開來(lái)，只編輯下 <title> 的內(nèi)容。
<title>demo</title>
發(fā)布地址
在 config/index.js 的 build 配置下，新增一條記錄。
index: path.resolve(__dirname, '../dist/index.html'), demo: path.resolve(__dirname, '../dist/demo.html'),
生產(chǎn)環(huán)境配置
調(diào)整 build/webpack.prod.conf.js 的 plugins 中，關(guān)于 html 的配置。
修改
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app']
}),這里主要有兩處改動(dòng)
filename直接寫死為防止加載不必要的
js，添加chunks配置。
新增
new HtmlWebpackPlugin({
filename: config.build.demo,
template: 'demo.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
thunks: ['manifest', 'vendor', 'demo']
}),預(yù)覽效果
這里不啟動(dòng)本地服務(wù)，所以需要修改下靜態(tài)資源的加載路徑，即將 config/index.js 中 build->assetsPublicPath 修改為 ./。
assetsPublicPath: './',
構(gòu)建應(yīng)用
$ npm run build
直接打開 dist 目錄中的 html 文件，即可預(yù)覽效果。
小結(jié)
至此，開發(fā)多頁(yè)面的最簡(jiǎn)示例就完成了。
進(jìn)一步優(yōu)化
實(shí)際開發(fā)中，頁(yè)面的數(shù)量較多，因而需要批量處理以下配置。
文件目錄
源碼部分 src 的目錄結(jié)構(gòu)如下
assets
logo.png
components
HelloWorld.vue
entries
index.js
list.js
templates
index.html
list.html
按照約定
entries用于存放頁(yè)面入口的js文件templates用于存放頁(yè)面的模板html文件
讀取目錄
為方便讀取頁(yè)面目錄，這里使用 glob 擴(kuò)展一個(gè)方法。
$ npm install glob --save-dev
安裝完依賴后，在 build/utils.js 中添加方法
const glob = require('glob')
// 遍歷指定目錄下的文件
exports.getEntries = (dirPath) => {
let filePaths = glob.sync(dirPath);
let entries = {};
filePaths.forEach(filePath => {
let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
entries[filename] = filePath;
})
return entries;
}修改配置
build/webpack.base.conf.js
entry: utils.getEntries('./src/entries/*.js'),build/webpack.base.prod.conf.js
刪除原有的 HtmlWebpackPlugin 相關(guān)配置，在文件結(jié)束之前遍歷添加相關(guān)配置即可。
const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
let fileConfig = {
filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
template: pages[page],
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
thunks: ['manifest', 'vendor']
};
fileConfig.thunks.push(page);
// 添加插件配置
webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}config/index.js
由于輸出的地址不在這里配置，之前的刪不刪除都不影響。但是，調(diào)整了目錄結(jié)構(gòu)，頁(yè)面中加載靜態(tài)資源的路徑也要做出調(diào)整。
assetsPublicPath: '../',
構(gòu)建并預(yù)覽
$ npm run build
構(gòu)建完成后，直接使用瀏覽器打開 dist 目錄下的 html 文件即可預(yù)覽效果。
總結(jié)
簡(jiǎn)單總結(jié)以下，使用 vue-cli 開發(fā)多頁(yè)面應(yīng)用的幾個(gè)關(guān)鍵點(diǎn)。
多入口
多個(gè)
HtmlWebpackPlugin靜態(tài)資源的路徑
此文中介紹的配置，不一定適用于所有的開發(fā)場(chǎng)景。優(yōu)化更多進(jìn)一步的細(xì)節(jié)，還是要在實(shí)際開發(fā)中不斷實(shí)踐。
相關(guān)推薦：
vue構(gòu)建多頁(yè)面應(yīng)用實(shí)例代碼分享
Vue-cli創(chuàng)建單頁(yè)面到多頁(yè)面的方法實(shí)例代碼
vue cli重構(gòu)多頁(yè)面腳手架實(shí)例分享
以上就是vue-cli開發(fā)多頁(yè)面應(yīng)用的簡(jiǎn)單示例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！