Vue-cli3多頁面配置詳解
Vue-cli3發(fā)布已經(jīng)好長時間了,筆者也在一直使用,由于公司業(yè)務(wù)需要要使用多頁面配置,于是花時間研究了一下Vue-cli3如何配置多頁面。由于Vue-cli3相比之前的版本做了很大的改動,在研究過程中也遇到一些問題。
對于Vue-cli3創(chuàng)建項目這里就不做太多的贅述了,畢竟不屬于本文內(nèi)容,有關(guān)相關(guān)博客也有很多,大家可以自行Google一下就好了。
多頁面應(yīng)用(mpa)與單頁面應(yīng)用(spa)優(yōu)缺點
在項目中我們用到的大多數(shù)都是單頁面應(yīng)用(spa),對于多頁面可能用到的比較少一些,具體還是要根據(jù)具體的業(yè)務(wù)情況,去覺得自己的技術(shù)選型。具體應(yīng)該如何應(yīng)用可以酌情考慮。
單頁面應(yīng)用(spa)
單頁面:單頁面,簡單的理解就是一種結(jié)構(gòu)布局很簡單的靜態(tài)頁面。 ——節(jié)選自百度百科
通俗的的來講單頁面就是只有一個html頁面,所有跳轉(zhuǎn)方式都是通過組件切換完成的。正如我們平時所用的Vue一樣,但是Vue同樣借助了Vue-Router完成了對頁面(組件)的切換來實現(xiàn)頁面之間的跳轉(zhuǎn)(即組件間的切換)。
單頁面的到來給前端帶來很大的好處,由于資源只需要加載所以頁面之間跳轉(zhuǎn)流暢,實現(xiàn)了組件化的的開發(fā),組件的重復(fù)利用,大大增加了開發(fā)的速度以及降低了項目的維護成本。
單頁面應(yīng)用既然有諸多的好處,當(dāng)然同樣也會帶來很多的一些弊端,由于單頁面應(yīng)用在初次訪問時需要加載全部的資源所以,首屏的加載速度會變得有一些慢。
多頁面應(yīng)用(mpa)
多頁面:整個項目有多個html,所有跳轉(zhuǎn)方式都是頁面之間相互跳轉(zhuǎn)的。
多頁面與與傳統(tǒng)的開發(fā)類似,除當(dāng)前頁面的路由以外都是使用a標(biāo)簽進行跳轉(zhuǎn)的。當(dāng)前路由仍然是使用Vue-Router進行跳轉(zhuǎn)。
多頁面應(yīng)用由于只會加載當(dāng)前訪問頁面所需要的資源,所以首屏加載速度很快,只加載本頁所使用的css、js,而且多頁面應(yīng)用相比單頁面應(yīng)用SEO要比單頁面應(yīng)用要好很多的。
多頁面由于只會獲取當(dāng)前頁面所需要的資源,那么這樣在進行頁面之間跳轉(zhuǎn)的時候?qū)е聲匦芦@取和加載資源,導(dǎo)致頁面之間的跳轉(zhuǎn)回變慢一些。
項目搭建
首先使用Vue-cli3腳手架創(chuàng)建一個Vue項目,創(chuàng)建完項目之后在根目錄中創(chuàng)建vue.config.js,用來增加Vue的webpack配置項。
let glob = require('glob'); //配置pages多頁面獲取當(dāng)前文件夾下的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, // 當(dāng)前目錄沒有有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,可以使用其他名稱。這里的文件夾用來分散多個頁面內(nèi)容。
在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> <h1>Index</h1> </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')
仔細看代碼代碼貌似與之前的單頁面應(yīng)用并沒有任何區(qū)別,但是有一點需要注意的是,一旦需要跳轉(zhuǎn)到另一個頁面的時候,需要使用a標(biāo)簽進行跳轉(zhuǎn)<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>。
爬坑內(nèi)容
- 若想在多頁面中使用Vue-Router也是可以的,只需要在對應(yīng)的頁面中添加Router的實例就可以了,需要注意的是一定要當(dāng)前頁面Router的實例只包含當(dāng)前頁面的路由。
- 在使用store的時候需要注意的是由于當(dāng)前store只與當(dāng)前頁面的實例中,當(dāng)發(fā)生頁面跳轉(zhuǎn)之后,則store數(shù)據(jù)無法進行共享,但是在當(dāng)前頁面中使用Router跳轉(zhuǎn)的路由,仍然是可以共享store的數(shù)據(jù)的。
總結(jié)
其實無論多頁面還是單頁面其實都是一種開發(fā)形式,我們只需要針對不同的需求和項目的復(fù)雜程度采取對應(yīng)的措施,即技術(shù)選型,無論是使用哪種都有其利弊,沒有必要一味的使用某一種模式,然而這樣可能限制了我們的開發(fā)思維。
到此這篇關(guān)于Vue-cli3多頁面配置詳解的文章就介紹到這了,更多相關(guān)Vue-cli3 多頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用axios?post發(fā)送json數(shù)據(jù)跨域請求403的解決方案
這篇文章主要介紹了vue使用axios?post發(fā)送json數(shù)據(jù)跨域請求403的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12解決vue-photo-preview 異步圖片放大失效的問題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件,當(dāng)它包裹動態(tài)組件時,會緩存不活動的組件實例,該組件將不會銷毀,這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)
這篇文章主要介紹了Vue 列表頁帶參數(shù)進詳情頁的操作(router-link),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11