Vue-cli构建多页应用方法

Vue的单页应用，可以说是一个很强大的存在。

但是，并非所有的应用都是单页的，如果需要构建多页应用应当怎么做呢？

1，认识vue页面加载过程

在创建多页面之前，还是要先简单地了解一下，vue页面时怎么加载的。

我们知道，在Vue-cli中默认目录结构如下：

1.项目的依赖模块目录，这个目录很大，因此一般需要加入.gitignore
2.公开目录，存放主页面等等，平时不需要改动
3.源代码文件夹，其中：
- 3.1.存放项目资源文件例如图片、js、css等等
- 3.2.存放vue开发的公共组件
- 3.3.vue的路由配置文件
- 3.4.存放页面文件
- 3.5.根组件
- 3.6.项目入口文件
4.vue项目的依赖配置文件，记录着这个项目使用的依赖

那么想必大家一定很好奇，根组件是怎么被加载的？为什么访问网站的根路径，就会访问到根组件？

我们知道，public文件夹下的index.html文件，是我们的主网页文件。当访问网站根路径时，就会访问这个index.html上面。

再说说我们的入口文件main.js，创建项目时里面已经有内容了，如下：

import {
	createApp
} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App).use(store).use(router).mount('#app');

重点在于createApp这个函数。

开始是引入各个组件，这个好理解。而createApp函数，会返回一个提供应用上下文的应用实例，可以链式调用。而每个vue文件都可以作为一个模板引入。

通俗地讲，先开始只是引入了模板，但是仅仅引入模板，是不能将它和我们的html联系起来的。

通过createApp，我们才创建了一个可以供上下文使用的实例，也就是说只有这个函数，才能创建一个可以显示渲染的实例。

然后通过其use函数，让这个实例使用其它模块。

最后通过mount函数，把这个实例内容，即App.vue文件的内容挂载至网页某个节点上，这样才能显示。

那为什么要挂载到id为app的节点上呢？可以打开public/index.html文件看看：

这样就很明确了，当我们访问服务器/本地地址根路径时，其实是访问了index.html这个网页，与此同时，main.js被执行，其中createApp函数执行，并将App.vue的内容挂载（填充）至这个html的id为app的div中。

这里有个简单的vue文件，内容只有一个类名为login的div：

访问网页，f12打开看看实际网页渲染：

可见原先id为app的div中没有内容，但是访问网页时，createApp函数创建的实例的mount函数，把app.vue中的标签给挂载上去了。

你还可以指定别的组件挂载上去，甚至是挂载到别的标签。

2，创建子页面

知道了vue页面加载过程，我们就可以创建子页面了。

我们的多页面应用，一般的结构如下：

我们知道，vue项目中有一个入口文件main.js，那么构建多页应用时，我们就会有多个入口文件。

现在，我们就开始吧！

我们在工程目录src文件夹中创建pages文件夹，专门用于存放我们的子页面。

我这里，再在pages中创建一个文件夹schedule表示我的子页面，然后在schedule中创建文件夹components、views、子页面的根组件（Schedule.vue）和入口js文件（schedule.js），如下：

然后在public文件夹中创建schedule.html表示我们的子页面主体：

新建的schedule.html内容可以复制index.html中的。

注意，静态资源、路由（router）、Vuex的store最好就通用，静态资源就放在src/assets中，如果每个子页面还创建一个静态资源文件夹，会在打包时候出问题。

这里相当于pages中，schedule文件夹装我们的子页面组件，其中的schedule.js表示这个子页面入口文件，他要把schedule页面的根节点挂载到schedule.html里面去。这个文件夹中Schedule.vue就是这个子页面的根节点。

然后在schedule文件夹中，views和components文件夹就用于装这个子页面的视图和组件vue文件。

注意，子页面的入口js文件最好是和子页面的html文件名字一致！

然后修改子页面的入口文件schedule.js如下：

import {
	createApp
} from 'vue';
import Schedule from './Schedule.vue';
import router from '../../router';
import store from '../../store';

createApp(Schedule).use(store).use(router).mount('#app');

可以说就和主页面的入口文件差不多，就是创建子页面的vue实例、然后挂载到子页面的html上的过程。注意这里引入router和store位置也需要改为正确的相对路径。

这样子页面的相关文件就创建完成了！

3，配置`vue.config.js`文件

到这里大家肯定也会有疑惑，现在有了两个入口文件，两个html了，那么访问网站时，会访问哪个html？会将谁作为入口文件？

所以这里就要进行配置。

打开vue.config.js文件（没有就在项目根目录创建一个），在其中添加配置：

module.exports = {
    pages: {
        // 先配置主页
        index: {
            entry: './src/main.js',
            template: './public/index.html',
            title: '用户登录'
        },
        // 再配置各个子页面：登录后课表查询页
        schedule: {
            entry: './src/pages/schedule/schedule.js',
            template: './public/schedule.html',
            title: '课表查询'
        }
    }
}

上述配置意义如下：

entry 这个页面的入口js文件
template 这个页面的html文件
title 这个页面的标题

可见pages配置项中，每一个页面配置是一个对象，这个对象名也是你访问的路径。

ok，现在启动项目，我们本地地址是http://localhost:8080，那么：

访问http://localhost:8080/index，就会访问到我们的主页面（index.html，入口文件./src/main.js）
访问http://localhost:8080/schedule，就会访问到我们的子页面（上述课表页面，schedule.html，入口文件./src/pages/schedule/schedule.js）

之后我们就可以在组件中使用a标签或者修改location.herf实现各个页面之间跳转。

那访问根路径（http://localhost:8080）是访问的谁呢？当然是index配置项对应的页面。

因为如果配置了pages选项，访问根路径时，会默认去找pages中名为index的那一项，然后进入其对应的入口文件，挂载对应的根组件，因此我们配置多页面应用时，pages中最好保留一个index项表示主页，否则可能找不到文件。

4，总结

默认情况下，vue-cli创建的是个单页应用，也就是一个页面。

我们也知道了，在vue-cli中，一个页面对应一个html文件、一个入口js文件和一个根组件，入口js文件主要负责把根组件挂载到html中去，访问的时候访问的是html文件。

多页面应用也是一样，其中每个子页面也有它的html文件、入口js文件和根组件，入口文件作用也一样。

然后通过vue.config.js文件的pages配置，实现各个页面的路径映射。

当然不要忘记，配置多页面之后（即配置了pages这一项后）根路径一般都是去访问pages项中的index，所以pages配置项中最好是留一个index项。

上述我们相当于把默认的页面作为主页面，自己在pages文件夹中创建子页面，主页面文件不改变原有位置。文件组织的方法其实很多，这里只是我推荐的方法。

最后提醒一下：在配置了多页应用时，就不能配置publicPath为./了！（相对路径）否则无法访问到其它页面。

更多配置可以参考：官方配置文档

Vue-cli构建多页应用方法

1，认识vue页面加载过程

2，创建子页面

3，配置vue.config.js文件

4，总结

3，配置`vue.config.js`文件