vuecli3X多页面配置

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