乐趣区

vuecli3X多页面配置

jiezi

1、在 public 文件夹下创建多页面 html 模板

定义页面 id

2、在 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;

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

退出移动版