溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue-cli3發(fā)布已經好長時間了，筆者也在一直使用，由于公司業(yè)務需要要使用多頁面配置，于是花時間研究了一下Vue-cli3如何配置多頁面。由于Vue-cli3相比之前的版本做了很大的改動，在研究過程中也遇到一些問題。
對于Vue-cli3創(chuàng)建項目這里就不做太多的贅述了，畢竟不屬于本文內容，有關相關博客也有很多，大家可以自行Google一下就好了。
多頁面應用(mpa)與單頁面應用(spa)優(yōu)缺點
在項目中我們用到的大多數都是單頁面應用(spa)，對于多頁面可能用到的比較少一些，具體還是要根據具體的業(yè)務情況，去覺得自己的技術選型。具體應該如何應用可以酌情考慮。
單頁面應用(spa)
單頁面：單頁面，簡單的理解就是一種結構布局很簡單的靜態(tài)頁面。 ——節(jié)選自百度百科
通俗的的來講單頁面就是只有一個html頁面，所有跳轉方式都是通過組件切換完成的。正如我們平時所用的Vue一樣，但是Vue同樣借助了Vue-Router完成了對頁面(組件)的切換來實現頁面之間的跳轉(即組件間的切換)。
單頁面的到來給前端帶來很大的好處，由于資源只需要加載所以頁面之間跳轉流暢，實現了組件化的的開發(fā)，組件的重復利用，大大增加了開發(fā)的速度以及降低了項目的維護成本。
單頁面應用既然有諸多的好處，當然同樣也會帶來很多的一些弊端，由于單頁面應用在初次訪問時需要加載全部的資源所以，首屏的加載速度會變得有一些慢。
多頁面應用(mpa)
多頁面：整個項目有多個html，所有跳轉方式都是頁面之間相互跳轉的。
多頁面與與傳統的開發(fā)類似，除當前頁面的路由以外都是使用a標簽進行跳轉的。當前路由仍然是使用Vue-Router進行跳轉。
多頁面應用由于只會加載當前訪問頁面所需要的資源，所以首屏加載速度很快，只加載本頁所使用的css、js，而且多頁面應用相比單頁面應用SEO要比單頁面應用要好很多的。
多頁面由于只會獲取當前頁面所需要的資源，那么這樣在進行頁面之間跳轉的時候導致會重新獲取和加載資源，導致頁面之間的跳轉回變慢一些。
項目搭建
首先使用Vue-cli3腳手架創(chuàng)建一個Vue項目，創(chuàng)建完項目之后在根目錄中創(chuàng)建vue.config.js，用來增加Vue的webpack配置項。
let glob = require('glob');
//配置pages多頁面獲取當前文件夾下的html和js
function getEntry(globPath) {
let entries = {}, tmp, htmls = {};
// 讀取src/pages/**/底下所有的html文件
glob.sync(globPath+'html').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
htmls[tmp[1]] = entry
})
// 讀取src/pages/**/底下所有的js文件
glob.sync(globPath+'ts').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
entries[tmp[1]] = {
entry,
// 當前目錄沒有有html則以共用的public/index.html作為模板
template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html',
// 以文件夾名稱.html作為訪問地址
filename:tmp[1] + '.html'
};
});
return entries;
};
let htmls = getEntry('./src/views/**/*.');
module.exports = {
pages:htmls,
publicPath: './', // 解決打包之后靜態(tài)文件路徑404的問題
outputDir: 'output', // 打包后的文件夾名稱，默認dist
devServer: {
open: true, // npm run serve 自動打開瀏覽器
index: '/index.html' // 默認啟動頁面
},
productionSourceMap: false
};
創(chuàng)建好vue.config.js之后，刪除App.vue和main.ts(main.js)文件，并在views文件夾下創(chuàng)建兩個新的文件夾index和about，可以使用其他名稱。這里的文件夾用來分散多個頁面內容。
在index文件夾下面創(chuàng)建index.html、index.vue、main.ts，about文件也是如此。
index.html
<!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><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
index.vue
<template>
<div id="app">
<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>
<h2>Index</h2>
</div>
</template>
<script>
export default {
name: 'page2'
}
</script>
<style>
</style>
main.ts
import Vue from 'vue'
import App from './index.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
仔細看代碼代碼貌似與之前的單頁面應用并沒有任何區(qū)別，但是有一點需要注意的是，一旦需要跳轉到另一個頁面的時候，需要使用a標簽進行跳轉<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>。
爬坑內容
總結
其實無論多頁面還是單頁面其實都是一種開發(fā)形式，我們只需要針對不同的需求和項目的復雜程度采取對應的措施，即技術選型，無論是使用哪種都有其利弊，沒有必要一味的使用某一種模式，然而這樣可能限制了我們的開發(fā)思維。
到此這篇關于Vue-cli3多頁面配置詳解的文章就介紹到這了,更多相關Vue-cli3 多頁面內容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
