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

2024-07-16
北京
本文字数：962 字
阅读完需：约 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',          },        },      },    ],  });

复制代码

发布于: 刚刚阅读数: 3

JEECG低代码

关注

低代码专家和开源作者 jeecg、jimureport 2020-05-01 加入

致力于国内开源事业，坚持开源10年+，打造多款爆火开源项目：JeecgBoot低代码平台、JimuReport积木报表工具、Jeewx微信管家系统。连续多年荣获十大优秀开源项目、低代码厂商TOP50、CSDN专家访谈等等

发布

暂无评论

创作场景

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

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

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

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

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

JEECG低代码

评论