VUE-CLI 构建多页应用

1、 使用vue-cli构建多页面只需要配置多个入口文件

2、先来看看实现效果

3、目录结构

4、main.js入口文件 （另外三个页面均相同 只是引入页面路径不同而已）

import Vue from 'vue'
import App from '../views/App.vue'
import router from '../router'
Vue.config.productionTip = false
new Vue({  router,  render: h => h(App)}).$mount('#app')

5、App.vue

<template>  
  <div id="app">    
   <div><a href="http://localhost:8081/page1.html">Page1</a></div>    
   <div><a href="http://localhost:8081/page2.html">Page2</a></div>    
   <div><a href="http://localhost:8081/page3.html">Page3</a></div>
  </div>
  </template>
<style lang="scss"></style>

6、vue.config.js配置

module.exports = {    
configureWebpack: {        
  devtool: 'source-map'    
},    
pages: {        
  Index: { //默认入口            
    entry: 'src/entries/main.js', //入口文件            
    template: 'public/index.html', //使用的html模板            
    filename: 'index.html' //因为访问路径时会默认访问 index.html 所以将默认显示的置为index.html        
  },        
  Page1: {            
    entry: 'src/entries/page1.js',            
    template: 'public/index.html',            
    filename: 'page1.html'        
  },        
  Page2: {            
    entry: 'src/entries/page2.js',            
    template: 'public/index.html',           
    filename: 'page2.html'        
  },        
  Page3: {            
    entry: 'src/entries/page3.js',            
    template: 'public/index.html',           
    filename: 'page3.html'        
  }    
}}

7、剩下页面和路由均正常编写即可 以page1为例
App.vue

<template>  
  <div id="app">    
    <router-view/>  
  </div>
</template>

page1Home.vue

<template>  
  <div class="home">    
    <h1>Page1Home</h1>  
  </div>
</template>
<script>
export default {  
  name: 'Page1Home'
}
</script>

路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../../views/Page1/page1Home'
Vue.use(VueRouter)
const routes = [{
    path: '/',
    name: 'Home',
    component: Home  
}]
const router = new VueRouter({  routes})export default router