在 JeecgBoot 專案中基於 Vue 3 配置多頁面入口

zhangdaiscott發表於2024-07-16
bootVue

在現代 Web 開發中，使用 Vue 框架構建專案已經成為一種常見的選擇。而 JeecgBoot 作為一個優秀的後臺管理系統框架，也提供了豐富的功能和元件，方便開發人員快速搭建企業級應用。本文將介紹如何在 JeecgBoot 專案中基於 Vue 3 配置多頁面入口，實現更靈活的頁面管理和定製化需求。

前提

首先，確保您已經下載好 JeecgBoot 的 Vue 3 的前端專案。

原始碼地址：https://github.com/jeecgboot/JeecgBoot

前端 vue3 配置專案多頁面入口

1. 專案根目錄新建 home.html

image

<!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 檔案

image

<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',
          },
        },
      },
    ],
  });

image

效果：

image

相關文章