vue-cli创建的vue项目是单页面应用，在我的项目中需要的是多页面应用，由此，通过Google学习他人的方法，并付诸于实践，在实践过程中，遇到了问题【本人属于好了伤疤忘了疼类型】，由此记录此文档，与大家共勉，给自己参考。有错误的地方，欢迎指出。
步骤：
步骤1：使用vue-cli创建单页面应用项目
首先，需要确保已安装vue-cli工具
可参考 vue-cli 安装路径，对vue-cli进行安装
使用以下命令查看vue-cli的版本号
vue -V
- 创建vue-demo项目
vue init webpack vue-demo
根据提示，可输入内容，也可不输入，然后按回车，其中Use ESLint to lint your code? (Y/n)，本人选择No；继续按回车。回车完之后，等待项目的创建。【耐心等待，，需要一会时间...】
- 进入项目，安装基础模块
cd vue-demo
npm install
等待一会...
- 运行项目
npm run dev
在浏览器输入http://localhost:8080即可访问到页面
若出现以上的页面，恭喜你成功的使用vue-cli创建单页面应用的vue项目了。接下来，实现将单页面应用转成多页面应用。
步骤2：将单页面应用转成多页面应用
在实现此功能时，查阅了网上大牛的做法，但是自己在实际操作时，还是遇到了问题，先将自己的操作流程以及遇到的问题总结如下：
参考文档：
1、调整项目目录
项目原目录结构图：
调整项目目录结构：
-
进入项目的src文件夹下，新建pages文件夹，用于存放页面文件
-
在pages文件夹下，新建index文件夹，将src目录下的App.vue、main.js、router文件夹以及项目根目录下的index.html文件移动到index文件夹里面，并且将main.js修改成index.js【PS：保证页面的入口js文件和模板文件的名称一致】
pages文件夹用于存放页面，并且每个页面都需要创建一个文件夹，此文件夹用于存放.html，.js，.vue3个文件
-
在pages下创建test文件夹，用于存放test页面相关文件
-
在src目录下新建modules文件夹，用于存放页面组件，公共的组件放置在components文件夹下，非公共存放在modules文件夹下
修改后的项目的目录结构如下：
2、修改配置文件
此部分，建议查看用vue构建多页面应用文章，以下操作我直接使用了本文章的操作方式，但是有些地方需要 狠主意 啦
主要修改以下文件：
-
utils.js
-
webpack.base.conf.js
-
webpack.dev.conf.js
-
webpack.prod.conf.js
具体修改如下：
- 打开项目根目录下的build文件夹下utils.js
- 打开项目根目录下的build文件夹下webpack.base.conf.js
- 打开项目根目录下的build文件夹下webpack.dev.conf.js
提示：记得加 逗号 ，神经大条的我，老是忘记加
- 打开项目根目录下的build文件夹下webpack.prod.conf.js
3、修改src/pages 目录下的页面
test下的文件参考index页面即可
- src/pages/index目录下的index.js引入当前页面（基本目录[index]下）的.vue文件时，需要注意，原文件的引入形式是：
import App from './App'
但是，我这人强迫症，硬是把index的文件夹下的文件改成index.html、index.js、index.vue，所以index.js文件引入vue文件时，需要做修改，修改如下：
import App from './index.vue'
大写的尴尬：我一开始写成 import App from './index'；然后怎么调试，怎么错误，折腾死我自己的。原因是：当前目录下有3个以index为前缀文件名，由于不知匹配哪一个，而抛出错误
4、运行npm run build命令
使用npm run build命令，项目目录下会多一个dist文件夹，里面存放多页面的.html文件
5、npm run dev运行项目
6、访问页面
打开test.html页面
http://localhost:8080/test.html
7、会存在的问题
- 问题1：打开test.html页面时，浏览器的console抛出如下错误：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
解决方法：在test.js文件下的vue实例中，添加如下代码：
//例：
new Vue({
el: '#test',
// router,
components: { Test },
template: '<Test/>',
render: h => h(Test) //添加此句代码
})
项目小demo
自己通过实践，实现了一个demo，有需要的可以参考下。
