vue 多页面

vue通过配置选项pages可实现多页面。过程如下：

1. 目录结构：
   
2. 配置文件vue.config.js：重点看pages选项，其他的选项与本文章无关联。

   	module.exports = {
   	//防止eslint乱报错
       lintOnSave: false,
       //配置服务器
       devServer:{
           //devServer监听的端口
           port:8000,
           //配置代理
           proxy:{
               //拦截的url
               '/api':{
                   //转发到目标服务器的url
                   target:"http://localhost:8080/",
                   //是否代理websockets,可选
                   ws:true,
                   //是否修改Host头部，可选
                   changeOrgin:true,
                   //修改请求路径
                   pathRewrite:{'/api':''}
               }
           }
       },
       //配置多页面
       pages:{
       	//键值为入口名
           index:{
               entry:"src/pages/index/main.js",//入口文件具体位置
               template:"src/pages/index.html"//入口文件使用的模板
           },
           article:{
               entry:"src/pages/article/main.js",
               template:"src/pages/article.html"
           }
       }
   };
   

顺便解释下main.js和App.vue
main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//创建vue实例
new Vue({
  render: h => h(App),//render为一个函数，它的第一个参数也是函数，一个在vue的虚拟DOM中创建虚拟节点的函数。是使用template选项创建组件的模板的一种可替代的方式。
}).$mount('#app')//手动将该实例绑定到html模板（如index.html），是使用el选项的一种替代方式

App.vue

<template>
  <!-- 默认创建的元素，设置了app。其实这个app可有可无，和上面$mount绑定的app没啥子关联 -->
  <div id="app">
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>