vuecli3 多页面配置

项目结构

案例多设置了login和home路径，所以在public里面需要配置login.html和home.html文件，src文件夹中新建了login和home文件夹用来存在对应的页面配置、数据以及模板。

1. login文件配置（有配置路由）

login文件目录

login-main.js

写法与main.js的一样

import Vue from 'vue';
import login from './login.vue';
import router from './login-router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(login)
}).$mount('#login')

login-router.js

如果需要路由就配置自己的路由，不需要路由就不用创建login-router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/zhuce',
      name: 'Zhuce',
      component: () => import('./view/zhuce.vue')
    },
    {
      path: '/wechat',
      name: 'WeChat',
      component: () => import('./view/wechat.vue')
    }
  ]
})

login.vue

<template>
  <div id="login">
    <div id="nav">
      <router-link to="/zhuce">注册</router-link> |
      <router-link to="/wechat">微信</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

<style lang="less" scoped>
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

2. home文件配置

home文件目录

home-main.js

import Vue from 'vue';
import home from './home.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(home)
}).$mount('#home')

home.vue

<template>
  <div id="home">我是首页  Home</div>
</template>

3. 设置id

public：赋值2份index.js，改名为login.html，home.html，id分别改为login、home
login.vue：id改为login
login-main.js：$mount('#login')
home.vue：id改为home
home-main.js：$mount('#home')

修改id是如果使用qiankun或者datax类似这种框架来嵌套项目中不同路径下的模板，模板的id都是app的话就导致id重名，影响样式

4. vue.config.js配置

module.exports = {
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === 'production'? '/': '/', //静态资源访问路径
  pages: {
    login: {
      entry: 'src/login/login-main.js',
      template: 'public/login.html'
    },
    home: {
      entry: 'src/home/home-main.js',
      template: 'public/home.html'
    },
    index: {
      entry: 'src/main.js',
      template: 'public/index.html'
    }
  }
}

5. 运行展示

6. 注意

多页面配置后，默认的index.html无法访问，解决方案

1. 在vue.config.js中page配置index页面
2. 删除src下面的mian.js，public下的index.html，这种方法默认打开提示 Cannot GET /，也就是没有默认根路径页面

如有出入望指教…