vue-cli3.X+多页面配置

1、在src下创建pages文件夹

新建页面的文件夹包含渲染页面、入口文件、挂载模板
（1）创建html，注意页面id和挂载模板、入口文件一致

（2）创建入口文件

//first.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

//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/v...
后续更新webpack3多页面配置