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