开发多页面的Vue应用遇到的问题-CSDN博客

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：将单页面应用转成多页面应用

在实现此功能时，查阅了网上大牛的做法，但是自己在实际操作时，还是遇到了问题，先将自己的操作流程以及遇到的问题总结如下：

参考文档：

用vue构建多页面应用

使用Vue-cli搭建多页面应用时对项目结构和配置的调整

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，有需要的可以参考下。