快捷導(dǎo)航

Vue-cli3多頁面配置詳解

更新時(shí)間：2020年03月22日 10:48:50 作者：Aaron

這篇文章主要介紹了Vue-cli3多頁面配置詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Vue-cli3發(fā)布已經(jīng)好長時(shí)間了，筆者也在一直使用，由于公司業(yè)務(wù)需要要使用多頁面配置，于是花時(shí)間研究了一下Vue-cli3如何配置多頁面。由于Vue-cli3相比之前的版本做了很大的改動(dòng)，在研究過程中也遇到一些問題。

對(duì)于Vue-cli3創(chuàng)建項(xiàng)目這里就不做太多的贅述了，畢竟不屬于本文內(nèi)容，有關(guān)相關(guān)博客也有很多，大家可以自行Google一下就好了。

多頁面應(yīng)用(mpa)與單頁面應(yīng)用(spa)優(yōu)缺點(diǎn)

在項(xiàng)目中我們用到的大多數(shù)都是單頁面應(yīng)用(spa)，對(duì)于多頁面可能用到的比較少一些，具體還是要根據(jù)具體的業(yè)務(wù)情況，去覺得自己的技術(shù)選型。具體應(yīng)該如何應(yīng)用可以酌情考慮。

單頁面應(yīng)用(spa)

單頁面：單頁面，簡單的理解就是一種結(jié)構(gòu)布局很簡單的靜態(tài)頁面。 ——節(jié)選自百度百科

通俗的的來講單頁面就是只有一個(gè)html頁面，所有跳轉(zhuǎn)方式都是通過組件切換完成的。正如我們平時(shí)所用的Vue一樣，但是Vue同樣借助了Vue-Router完成了對(duì)頁面(組件)的切換來實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)(即組件間的切換)。

單頁面的到來給前端帶來很大的好處，由于資源只需要加載所以頁面之間跳轉(zhuǎn)流暢，實(shí)現(xiàn)了組件化的的開發(fā)，組件的重復(fù)利用，大大增加了開發(fā)的速度以及降低了項(xiàng)目的維護(hù)成本。

單頁面應(yīng)用既然有諸多的好處，當(dāng)然同樣也會(huì)帶來很多的一些弊端，由于單頁面應(yīng)用在初次訪問時(shí)需要加載全部的資源所以，首屏的加載速度會(huì)變得有一些慢。

多頁面應(yīng)用(mpa)

多頁面：整個(gè)項(xiàng)目有多個(gè)html，所有跳轉(zhuǎn)方式都是頁面之間相互跳轉(zhuǎn)的。

多頁面與與傳統(tǒng)的開發(fā)類似，除當(dāng)前頁面的路由以外都是使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)的。當(dāng)前路由仍然是使用Vue-Router進(jìn)行跳轉(zhuǎn)。

多頁面應(yīng)用由于只會(huì)加載當(dāng)前訪問頁面所需要的資源，所以首屏加載速度很快，只加載本頁所使用的css、js，而且多頁面應(yīng)用相比單頁面應(yīng)用SEO要比單頁面應(yīng)用要好很多的。

多頁面由于只會(huì)獲取當(dāng)前頁面所需要的資源，那么這樣在進(jìn)行頁面之間跳轉(zhuǎn)的時(shí)候?qū)е聲?huì)重新獲取和加載資源，導(dǎo)致頁面之間的跳轉(zhuǎn)回變慢一些。

項(xiàng)目搭建

首先使用Vue-cli3腳手架創(chuàng)建一個(gè)Vue項(xiàng)目，創(chuàng)建完項(xiàng)目之后在根目錄中創(chuàng)建vue.config.js，用來增加Vue的webpack配置項(xiàng)。

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',    // 打包后的文件夾名稱，默認(rèn)dist
  devServer: {
    open: true,       // npm run serve 自動(dòng)打開瀏覽器
    index: '/index.html'  // 默認(rèn)啟動(dòng)頁面
  },
  productionSourceMap: false
};

創(chuàng)建好vue.config.js之后，刪除App.vue和main.ts(main.js)文件，并在views文件夾下創(chuàng)建兩個(gè)新的文件夾index和about，可以使用其他名稱。這里的文件夾用來分散多個(gè)頁面內(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')

仔細(xì)看代碼代碼貌似與之前的單頁面應(yīng)用并沒有任何區(qū)別，但是有一點(diǎn)需要注意的是，一旦需要跳轉(zhuǎn)到另一個(gè)頁面的時(shí)候，需要使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>。

爬坑內(nèi)容

若想在多頁面中使用Vue-Router也是可以的，只需要在對(duì)應(yīng)的頁面中添加Router的實(shí)例就可以了，需要注意的是一定要當(dāng)前頁面Router的實(shí)例只包含當(dāng)前頁面的路由。
在使用store的時(shí)候需要注意的是由于當(dāng)前store只與當(dāng)前頁面的實(shí)例中，當(dāng)發(fā)生頁面跳轉(zhuǎn)之后，則store數(shù)據(jù)無法進(jìn)行共享，但是在當(dāng)前頁面中使用Router跳轉(zhuǎn)的路由，仍然是可以共享store的數(shù)據(jù)的。

總結(jié)

其實(shí)無論多頁面還是單頁面其實(shí)都是一種開發(fā)形式，我們只需要針對(duì)不同的需求和項(xiàng)目的復(fù)雜程度采取對(duì)應(yīng)的措施，即技術(shù)選型，無論是使用哪種都有其利弊，沒有必要一味的使用某一種模式，然而這樣可能限制了我們的開發(fā)思維。

到此這篇關(guān)于Vue-cli3多頁面配置詳解的文章就介紹到這了,更多相關(guān)Vue-cli3 多頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: