vue3配置多页面应用
多页面的目录结构
最近接到一个项目，要开发一套内部的资源管理系统。客户端界面我打算使用vue3构建，而使用vue3创建的项目默认都是单页面应用，但项目给开发人员暴露了配置多页面的方法：
在vue.config.js中配置pages对象。
本文通过一个案例，另外配置两个入口，并简单说一下多页面项目的目录规划。
我们先来搭建一下目录结构。首先初始化项目，流程可以参考：
先来看一下我这次项目的设计图
通过设计图可以看到，我要添加的就是图库、视频、音频、字体4个分页。初始化项目后，就需要再对本地的src目录进行一下修改了，由于要分4个分页，所以在public中新增3个html文件，除了index.html，分别是video.html、audio.html、font.html。
之后在src中新增pages目录，作为多页面目录，并在pages目录下新建各个页面文件夹，将最终目录结果修改如下：
（名称后未加后缀的 代表是文件夹目录）
pics ------- 项目文件夹
|-- node_modules
|-- public
|-- audio.html
|-- favicon.ico
|-- font.html
|-- index.html
|-- video.html
|-- src
|-- api 存放接口
|-- common 存放公共的方法、样式等
|-- components 各种公共组件
|-- pages 存放各种多页的文件夹
|-- audio 音频库组件 对应audio.html
|-- views 存放该页面独有的视图组件文件夹
|-- App.vue 该（模板）页的主文件，等同单页应用src目录下的的App.vue
|-- main.js 该（模板）页的入口文件，等同单页应用src目录下的的main.js
|-- font 字体库组件 对应font.html
|-- views
|-- App.vue
|-- main.js
|-- image 图片库组件 对应index.html
|-- views
|-- router 该（模板）页（图库）的路由
|-- index.js
|-- App.vue
|-- main.js
|-- video视频库组件 对应video.html
|-- views
|-- App.vue
|-- main.js
|-- vue.config.js 项目的webpack配置文件注意： 多页面配置后，默认的index.html将无法正常访问，我们可以剪切src下的main.js、App.vue 将他们移动到pages/index目录下（本例中，我是移动到了image目录下），然后在vue.config.js中添加配置，添加index.html指向的组件（下面会介绍）。
在项目的初始化阶段，我们可以将原来的app.vue和main.js直接分别复制到pages下的每个单独的目录中即可。
// main.js是每个分页的入口
import { createApp } from 'vue';
import App from './App.vue';
import '@/common/less/index.less';
createApp(App).mount('#app');
// App.vue是每个分页面的根组件
<template>
<div>font</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "fontApp"
}
</script>
<style lang="less" rel="stylesheet/less" scoped></style>如果那个分页需要路由的话，就在该分页下添加router/index.js文件，专门配置该分页下的路由配置。
这里我以vue-router4为例，简单贴一个使用的配置作为大家参考，更多详细使用，参考我的另一篇文章：
import { createRouter, createWebHashHistory } from 'vue-router';
import Detail from 'components/detail/detail';
import MainList from 'components/main-list/main-list';
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'mainlist',
component: MainList,
// 路由元信息定义每个路由进入退出的不同动画
meta: { transition: 'aside-right' }
},
{
path: '/detail',
name: 'detail',
component: Detail,
meta: { transition: 'aside-right' }
}
]
});
export default router;最后需要注意的一点是，每个分页的vuex也是单独的！如果要共享数据，就要使用本地缓存等，切不要以为多个分页都可以用一个vuex，必须在每个分页的目录下单独配置store文件！
vue.config文件的配置
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 打包文件的路径 注意每次需要更换
publicPath: '',
productionSourceMap: false,
chainWebpack(config) {
config.resolve.alias
.set('components', resolve('src/components'))
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
},
// 多页面的配置 重点
pages: {
//配置展开写法
// 如果是多页面配置，那么Index需要单独移动到pages字段中进行配置一下
index: {
entry: 'src/pages/image/main.js',
template: 'public/index.html',
filename: 'index.html',
title: '信网资源 | 图库',
},
video: {
// 必需项:应用入口配置，相当于单页面应用的main.js
entry: 'src/pages/video/main.js',
//可选项： 应用的html模版，相当于单页面应用的public/index.html，省略时默认与模块名一致
template: 'public/video.html',
// 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
filename: 'video.html',
// 可选项，html中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '信网资源 | 图库',
// 可选项，需要引入的打包后的块
// chunk-vendors指的是项目打包后抽离的公共库 video指的是我们的当前页面打包后的业务块
// chunks: ['chunk-vendors','video']
},
audio: {
entry: 'src/pages/audio/main.js',
template: 'public/audio.html',
filename: 'audio.html',
title: '信网资源 | 音频库',
},
font: {
entry: 'src/pages/font/main.js',
template: 'public/font.html',
filename: 'font.html',
title: '信网资源 | 字体库',
}
}
};具体配置参考上面的配置文件。其中请注意看pages字段的配置，关于每个字段的意义，参考video字段。
值得注意的是，每个字段，我推荐html文件名与字段名和组件名都相同。比如：
pages.video字段对应public/video.html文件和pages/video组件目录
pages.index字段对应public/index.html文件和pages/image组件目录（index作为分页一部分，比较特殊）
单独解释chunks的配置
chunks: ['chunk-vendors','video']chunk-vendors指的是项目打包后抽离的公共库，video指的是我们的当前页面打包后的业务块，运行npm run build，在dist中可以看到，这块不明白的可以了解一下webpack的dllPlugin插件，或者干脆使用第二种简写配置，vuecli会帮助我们自动引入。
pages: {
// 配置简写 直接用字符串表示模块入口，其他采用默认
index: 'src/pages/image/main.js',
}但是我不推荐大家这样做，如果不懂chunks功能的（比如我），直接省略此配置项目即可，让vue使用默认配置完成。
目录