在 JeecgBoot 项目中基于 Vue 3 配置多页面入口

在现代 Web 开发中，使用 Vue 框架构建项目已经成为一种常见的选择。而 JeecgBoot 作为一个优秀的后台管理系统框架，也提供了丰富的功能和组件，方便开发人员快速搭建企业级应用。本文将介绍如何在 JeecgBoot 项目中基于 Vue 3 配置多页面入口，实现更灵活的页面管理和定制化需求。

前提

首先，确保您已经下载好 JeecgBoot 的 Vue 3 的前端项目。

源码地址：https://github.com/jeecgboot/JeecgBoot

前端 vue3 配置项目多页面入口

1. 项目根目录新建 home.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%= title %></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
</html>

2.src 目录下新建 multiPage/home 目录及 App.vue 和 main.ts 文件

<template>
  <div>home 页面</div>
</template>
<script setup lang="ts"></script>
<style scoped>
  div {
    background-color: red;
    color: #fff;
  }
</style>

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

3. 替换 build/vite/plugin/html.ts 中的 htmlPlugin

const htmlPlugin:PluginOption[] = createHtmlPlugin({
    minify: isBuild,
    pages: [
      {
        entry: `src/main.ts`,
        template: `index.html`,
        filename: 'index.html',
        injectOptions: {
          // 修改模板html的标题
          data: {
            title: VITE_GLOB_APP_TITLE,
          },
          // 将app.config.js文件注入到模板html中
          tags: isBuild
            ? [
                {
                  tag: 'script',
                  attrs: {
                    src: getAppConfigSrc(),
                  },
                },
              ]
            : [],
        },
      },
      {
        entry: `src/multiPage/home/main.ts`,
        template: `home.html`,
        filename: 'home.html',
        injectOptions: {
          // 向ejs模板中注入数据
          data: {
            title: 'home',
          },
        },
      },
    ],
  });

在 JeecgBoot 项目中基于 Vue 3 配置多页面入口

前端 vue3 配置项目多页面入口

1. 项目根目录新建 home.html

2.src 目录下新建 multiPage/home 目录及 App.vue 和 main.ts 文件

3. 替换 build/vite/plugin/html.ts 中的 htmlPlugin

效果：

JEECG低代码平台

引用和评论

可视化工具对比：JimuReport VS QuickBI

一个用JavaScript生成思维导图(mindmap)的github repo

精简实用！一分钟搭建文件管理服务！

ABAP git客户端

写在Github被微软收购之际 - Github的那些另类用法

使用代码将github仓库里某个issue同步到CSDN博客上

开发一个简单的工具，导出github仓库所有issue列表