vue-cli3 下创建多页面应用

参考链接 blog.csdn.net/panzi_only/…

• 1. 复制index.html生成home.html + login.html,并将文件里的改 id="home"  id="login",删除旧的index.html
• 2. src下新建home目录+login目录，下面的文件目录结构同脚手架的目录结构
• 3. 修改2步骤下的各自的main.js

import Vue from 'vue'
import Login from './Login.vue'
import router from './router'

Vue.config.productionTip = false

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

• 4. 路由一定要都改成hash模式
• 5. 项目根目录下新建 vue.config.js文件

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

• 6.访问,正常访问路径间加上5步骤中的pages中的 [key].html

// xxx表示路径
http://localhost:8080/login.html#/xxx
http://localhost:8080/home.html#/xxx