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
为./
了!(相对路径)否则无法访问到其它页面。
更多配置可以参考:官方配置文档
转载自:https://juejin.cn/post/7006596948220182542