vue開發多頁面應用

一、添加多頁面配置

在工程根路徑下（package.json同目錄）添加添加vue.config.js配置文件，內容爲：

module.exports = {
    pages: {
　　　　 index:　'src/main.js',
        home: {
            // 應用入口配置，至關於單頁面應用的main.js，必需項
            entry: 'src/modules/home/home.js',

            // 應用的模版，至關於單頁面應用的public/index.html，可選項，省略時默認與模塊名一致
            template: 'public/home.html',

            // 編譯後在dist目錄的輸出文件名，可選項，省略時默認與模塊名一致
            filename: 'home.html',

            // 標題，可選項，通常狀況不使用，一般是在路由切換時設置title
            // 須要注意的是使用title屬性template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'homepage',

            // 包含的模塊，可選項
            chunks: ['home']
        },
        // 只有entry屬性時，直接用字符串表示模塊入口
        about: 'src/modules/client/about.js'
    }
}

二、建立多頁面應用

建立模塊，在src下建立目錄modules，在modules下建立兩個模塊home和about；在public下添加模版home.html和about.html。完成後工程結構以下：

三、應用路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: (resolve) => require(['./Home.vue'], resolve)
    }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: (resolve) => require(['./About.vue'], resolve)
    }
  ]
})

四、頁面添加連接

<template>
  <div id="app">
    <nav>
      <a href="home.html">Home</a> |
      <a href="about.html">About</a>
    </nav>
  </div>
</template>