如何搭建vue.js多页面开发环境？

本文共计812个文字，预计阅读时间需要4分钟。

使用vue-cli搭建的项目大多为单页面应用，对简单项目来说，单页面足以满足需求。但对于包含多个子项目的应用，若创建多个单页面，则可能存在重复和+node_modules+重复的问题。

利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。但对于有多个子项目的应用，如果创建多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。如果全部放到单页面项目下，又显得有点乱，这时候通过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。

如何改造单页面 vue.js 项目为多页面项目？下面是这次改造的具体过程。

一、创建单页面 vue.js 项目

这里直接使用官方提供的脚手架 vue-cli3 创建，具体的过程请参考「vue-cli3.0 升级记录」

二、多页面配置

1、添加配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.config.js，内容如下：

module.exports = { pages: { index: { // 入口js的路径 entry: './src/main', // 页面模板路径 template: './src/public/index.html' } } }

上面的配置其实就是 vue-cli 建立项目的默认配置，如果增加页面，在 pages 节点下添加配置即可。但这种方式，每次增加一个新页面，就需要手动添加节点，这种重复的事情显然不智能。下面继续改造。