Vue-cli3多頁面配置

時間 2020-03-23

標籤 vue cli3 cli 頁面配置简体版

原文原文鏈接

Vue-cli3發佈已經好長時間了，筆者也在一直使用，因爲公司業務須要要使用多頁面配置，因而花時間研究了一下Vue-cli3如何配置多頁面。因爲Vue-cli3相比以前的版本作了很大的改動，在研究過程當中也遇到一些問題。javascript

對於Vue-cli3建立項目這裏就不作太多的贅述了，畢竟不屬於本文內容，有關相關博客也有不少，你們能夠自行Google一下就行了。css

多頁面應用(mpa)與單頁面應用(spa)優缺點

在項目中咱們用到的大多數都是單頁面應用(spa)，對於多頁面可能用到的比較少一些，具體仍是要根據具體的業務狀況，去以爲本身的技術選型。具體應該如何應用能夠酌情考慮。html

單頁面應用(spa)

單頁面：單頁面，簡單的理解就是一種結構佈局很簡單的靜態頁面。 ——節選自百度百科前端

通俗的的來說單頁面就是隻有一個html頁面，全部跳轉方式都是經過組件切換完成的。正如咱們平時所用的Vue同樣，可是Vue一樣藉助了Vue-Router完成了對頁面(組件)的切換來實現頁面之間的跳轉(即組件間的切換)。vue

單頁面的到來給前端帶來很大的好處，因爲資源只須要加載因此頁面之間跳轉流暢，實現了組件化的的開發，組件的重複利用，大大增長了開發的速度以及下降了項目的維護成本。java

單頁面應用既然有諸多的好處，固然一樣也會帶來不少的一些弊端，因爲單頁面應用在初次訪問時須要加載所有的資源因此，首屏的加載速度會變得有一些慢。webpack

多頁面應用(mpa)

多頁面：整個項目有多個html，全部跳轉方式都是頁面之間相互跳轉的。web

多頁面與與傳統的開發相似，除當前頁面的路由之外都是使用a標籤進行跳轉的。當前路由仍然是使用Vue-Router進行跳轉。npm

多頁面應用因爲只會加載當前訪問頁面所須要的資源，因此首屏加載速度很快，只加載本頁所使用的css、js，並且多頁面應用相比單頁面應用SEO要比單頁面應用要好不少的。瀏覽器

多頁面因爲只會獲取當前頁面所須要的資源，那麼這樣在進行頁面之間跳轉的時候致使會從新獲取和加載資源，致使頁面之間的跳轉回變慢一些。

項目搭建

首先使用Vue-cli3腳手架建立一個Vue項目，建立完項目以後在根目錄中建立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: './',           //  解決打包以後靜態文件路徑404的問題
    outputDir: 'output',        //  打包後的文件夾名稱，默認dist
    devServer: {
        open: true,             //  npm run serve 自動打開瀏覽器
        index: '/index.html'    //  默認啓動頁面
    },
    productionSourceMap: false
};

建立好vue.config.js以後，刪除App.vue和main.ts(main.js)文件，並在views文件夾下建立兩個新的文件夾index和about，可使用其餘名稱。這裏的文件夾用來分散多個頁面內容。

在index文件夾下面建立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">
    <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">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')

仔細看代碼代碼貌似與以前的單頁面應用並無任何區別，可是有一點須要注意的是，一旦須要跳轉到另外一個頁面的時候，須要使用a標籤進行跳轉<a href="about.html">About</a>。

爬坑內容

若想在多頁面中使用Vue-Router也是能夠的，只須要在對應的頁面中添加Router的實例就能夠了，須要注意的是必定要當前頁面Router的實例只包含當前頁面的路由。
在使用store的時候須要注意的是因爲當前store只與當前頁面的實例中，當發生頁面跳轉以後，則store數據沒法進行共享，可是在當前頁面中使用Router跳轉的路由，仍然是能夠共享store的數據的。

總結

其實不管多頁面仍是單頁面其實都是一種開發形式，咱們只須要針對不一樣的需求和項目的複雜程度採起對應的措施，即技術選型，不管是使用哪一種都有其利弊，沒有必要一味的使用某一種模式，然而這樣可能限制了咱們的開發思惟。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。