使用 vue-cli 建立一個專案
$ vue init webpack vue-multiple-demo
根據控制台的提示，填寫相關資訊即可。建立完成後，進入該專案根目錄並安裝相依性。
$ cd vue-multiple-demo $ npm install
由於是開發多頁面應用，該工程就沒有配置 vue-router。
透過 vue-cli 建立的項目，預設是開發單頁應用程式。如果希望開發多頁面，需要調整部分腳本的配置。
在src 目錄下新建一個demo.js，為方便起見，直接將main.js中的內容複製過去。然後，修改 build/webpack.base.conf.js 的 entry 為多個。
entry: {
app: './src/main.js',
demo: './src/demo.js'
},在工程根目錄下新建一個 demo.html 文件，同樣將 index.html 的內容複製過去。為了區分開來，只編輯下 <title> 的內容。
<title>demo</title>
在 config/index.js 的 build 設定下，新增一筆記錄。
index: path.resolve(__dirname, '../dist/index.html'), demo: path.resolve(__dirname, '../dist/demo.html'),
調整build/webpack.prod.conf.js 的plugins 中，關於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']
}),這裡主要有兩處改動
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']
}),這裡不啟動本機服務，所以需要修改下靜態資源的載入路徑，即將config/index.js 中build->assetsPublicPath 修改為./。
assetsPublicPath: './',
建置應用程式
$ npm run build
直接開啟 dist 目錄中的 html 文件，即可預覽效果。
至此，開發多頁面的最簡範例就完成了。
實際開發中，頁面的數量較多，因而需要批次處理以下配置。
原始碼部分src 的目錄結構如下
assets
logo.png
components
HelloWorld.vue
#entries
index.js
#list.js
templates
index.html
#list.html
entries 用來存放頁面入口的js 檔案
templates 用來存放頁面的範本html 檔案
擴充一個方法。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre><div class="contentsignin">登入後複製</div></div>安裝完依賴後，在
中加入方法<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;
}</pre><div class="contentsignin">登入後複製</div></div>修改設定
entry: utils.getEntries('./src/entries/*.js'), 相關配置，在檔案結束前遍歷新增相關配置即可。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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));
}</pre><div class="contentsignin">登入後複製</div></div>config/index.js
assetsPublicPath: '../',
建置並預覽
$ npm run build
目錄下的 html 檔案即可預覽效果。 總結
開發多頁面應用程式的幾個關鍵點。
相關推薦：
vue建立多頁面應用程式實例程式碼分享Vue-cli建立單頁到多頁面的方法實例程式碼vue cli重構多頁面腳手架實例分享以上是vue-cli開發多頁面應用的簡單範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
