Vue3+Vite+TS：多入口项目搭建（简单版）

当多个系统平台想要共享公共组件等资源，而彼此之间基本没有业务关联，此时可以配置多入口应用，将多个系统平台代码放在同一个代码仓库管理。

创建项目

# npm create vite@latest 项目名
npm create vite@latest multi-entry-demo
1
2

选择vue，回车
选择vue框架
选择vue-ts，回车

按照指示操作
安装依赖并运行
项目目录如下

多页面配置

删除无用文件

删除项目根目录下src目录中除vite-env.d.ts文件外的所有文件，以及项目根目录下index.hml文件。
删除冗余文件

创建多个项目目录

在项目根目录下src目录中创建packages目录（统一管理多个入口文件）。
在packages目录下创建app1目录，并在其中创建App.vue、index.html及main.ts文件。


<template>
  <router-view />
template>

<script setup lang="ts">script>
1
2
3
4
5
6


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>app1title>
head>
<body>
  <div id="app">div>
  <script type=1
2
3
4
5
6
7
8
9
10
11

相关阅读:
信奥中的数学：奇数与偶数
Zemax基础知识7--衍射知识（一）
编程面试_数组
【MindSpore易点通】如何迁移PyTorch代码并在Ascend上实现单机单卡训练
【新日语2】第16課田中さんは今会社を出るところです
vxe-table添加排序
Pod安全策略：PodSecurityPolicy(PSP)
Java · 面向对象编程 · 包的概念 · 继承 · 组合
宜宾市中小学足球调研现状
密码学基础知识

原文地址：https://blog.csdn.net/qq_44419617/article/details/126642722