vue通过配置选项pages可实现多页面。过程如下：
目录结构： 配置文件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>