为什么使用

因为我们在开发的时候，经常会使用类似iframe这样的结构，但是每个都去写又会复杂，使用这个插件，不光提升效率，还能有更多灵活性。
写

安装

npm i vite-plugin-vue-meta-layouts -D

配置

import MetaLayouts from 'vite-plugin-vue-meta-layouts'

	plugins: [
        Vue(), 
        MetaLayouts()
    ]

使用

配置路由

这里需要改造一下router.ts。

import { setupLayouts } from 'virtual:meta-layouts'
import { createRouter, createWebHistory } from 'vue-router'

const routes = setupLayouts([{
    // ... 页面路由配置
}])

const router = createRouter({
    routes,
    history: createWebHistory()
})

搭配vite-plugin-pages使用。

import fileRoutes from '~pages' // 引入文件路由表
import { setupLayouts } from 'virtual:meta-layouts'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    routes: setupLayouts(fileRoutes), // 注册文件路由表
    history: createWebHistory()
})

找不到类型声明处理

在env.d.ts文件添加类型声明：

/// <reference types="vite-plugin-vue-meta-layouts/client" />

创建layouts

当然这里布局文件需要引入router-view,毕竟他的功能就类似iframe一样。

默认layouts布局

创建layouts/default.vue默认布局，此时页面都会被应用该布局

<template>
    default
    <router-view /> 
</template>

其他布局例如admin.vue。

<template>
    admin
    <router-view /> 
</template>

vue页面使用

此时可以通过页面中的自定义块 route 的 meta 来做布局配置

<!-- 你的页面 -->
<template>
    内容
</template>

<route>
{
    meta: {
        layout: 'admin'
    }
}
</route>

完工。