vue-cli4+多頁面配置

src下創建pages文件夾包含渲染頁面、入口文件、掛載模板

（1）創建html，注意頁面id和掛載模板、入口文件一致

  （2）創建入口文件 

// firsrt.js

import Vue from 'vue' import First from './first.vue' import router from "../../router/first.js"; Vue.config.productionTip = false new Vue({ router, render: h => h(First) }).$mount('#first')  

(3)創建路由文件 

//router/first.js

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const routes = [
  {
    path: "/firstview",
    name: "firstView",
    component: () => import(`../views/firstView.vue`)
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

 （4）創建掛載模板

// first.vue
<template>
  <div id="first">
    <router-link to='firstview'>firstview</router-link>
    <a href="secondview">secondview</a>
    <router-view />
  </div>
</template>

<script>
export default {
};
</script>

（5）配置vue.config.js 

module.exports = {
  pages: {
    first: {
      entry: "src/pages/first/first.js",
      template: "src/pages/first/first.html",
      filename:
        "index.html" /*filename定義為index.html，頁面路由默認從該頁面開始*/,
      title: "firstPage"
    },
    second: {
      entry: "src/pages/second/second.js",
      template: "src/pages/second/second.html",
      filename: "second.html",
      title: "secondPage"
    }
  }
};

 需要注意的是：

1、路由跳轉時，同一頁面的可以用router-link，不同頁面之間需用a標簽跳轉

  2、vue.config配置時filename=index.html的頁面為默認初始頁

整個demo放在 https://github.com/JoyZ1122/vue-multipage
后續更新webpack3多頁面配置