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多页面配置