vue-cli3.X+多页面配置

一、在public文件夹下建立多页面html模板

定义页面 id

二、在src下新建page文件夹，分别定义各页面的入口文件和挂载模板

注意id要和first.html中的id对应

<!--  pages/first/first.vue -->
<template>
  <div id="first">
    FirstPage
    <router-link to="/firstview">to firstview</router-link>|
    <router-link to="/">to firstHomePage</router-link>|
    <a href="second">to secondHomePage</a>|
    <a href="second/secondview">to secondview</a>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "first",
  methods: {}
};
</script>
<style lang="scss">
</style>

/* pages/first/first.js*/
import Vue from "vue";
import First from "./first.vue";
import router from "../../router/first";

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(First),
}).$mount("#first");

router文件分别定义各页面路由

这里我用的是哈希模式的路由，为了页面子下的路由跳转看起来更清晰，你也能够设置为history模式，配置父路由实现一样的效果，须要注意的是页面级的跳转须要用到a标签

/* router/first.js*/
import Vue from "vue";
import VueRouter from "vue-router";
import first from '../pages/first/first';
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "firstView",
    component: first
  },

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

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

export default router;

三、在vue.config.js pages下面中定义多页面，分别配置各页面的入口文件entry、模板页面template，定义打包后的html名称filename、页面titile

/* vue.config.js*/

module.exports = {
  pages: {
    first: {
      entry: "src/pages/first/first.js",
      template: "public/first.html",
      filename: "first.html",
      title: "firstPage",
    },
    second: {
      template: "public/second.html",
      entry: "src/pages/second/second.js",
      filename: "second.html",
      title: "secondPage",
    },
  },
};

整个项目放在https://github.com/JoyZ1122/v... multipage分支 后续会在各分支下加入服务端渲染SSR配置 cli2多页面配置