likes
comments
collection
share

Vue-cli构建多页应用方法

作者站长头像
站长
· 阅读数 28

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

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

1,认识vue页面加载过程

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

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

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文件的内容挂载至网页某个节点上,这样才能显示。

那为什么要挂载到idapp的节点上呢?可以打开public/index.html文件看看:

Vue-cli构建多页应用方法

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

这里有个简单的vue文件,内容只有一个类名为logindiv

Vue-cli构建多页应用方法

访问网页,f12打开看看实际网页渲染:

Vue-cli构建多页应用方法

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

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

2,创建子页面

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

我们的多页面应用,一般的结构如下:

Vue-cli构建多页应用方法

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

现在,我们就开始吧!

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

我这里,再在pages中创建一个文件夹schedule表示我的子页面,然后在schedule中创建文件夹componentsviews、子页面的根组件(Schedule.vue)和入口js文件(schedule.js),如下:

Vue-cli构建多页应用方法

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

Vue-cli构建多页应用方法

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

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

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

然后在schedule文件夹中,viewscomponents文件夹就用于装这个子页面的视图和组件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上的过程。注意这里引入routerstore位置也需要改为正确的相对路径。

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

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构建多页应用方法

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

转载自:https://juejin.cn/post/7006596948220182542
评论
请登录