Vite несколько приложений с одним и тем же источником
Я новичок в vite, для начала, я на самом деле не знаю, какая структура мне нужна.
Мне нужно создать несколько приложений, но некоторые из них зависят от одних и тех же компонентов.
Это работало хорошо, но я думаю, что что-то перепутал
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<link rel = "icon" href = "/favicon.ico" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type = "module" crossorigin src = "/assets/modules/modules\\VPlayerList\\index-74e8dd8e.js"></script>
<link rel = "modulepreload" crossorigin href = "/assets/js/main-a0df4ea4.js">
<link rel = "stylesheet" href = "/assets/main.44382b18.css">
</head>
<body>
<div id = "app"></div>
</body>
</html>
Hrefs неправильные, что я упускаю?
забыл прикрепить конфиг vite:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path, { resolve } from 'path'
import glob from 'glob';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
input: Object.fromEntries(
glob.sync("src/modules/**/*.html").map((file:string) => [
path.relative(
"src",
file.slice(0, file.length - path.extname(file).length)
),
fileURLToPath(new URL(file, import.meta.url)),
])
),
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/modules/[name]-[hash].js',
dir: "dist"
}
},
},
})
Пожалуйста, смотрите связанный метапост. tl;dr изображения кода не могут быть проиндексированы поисковыми системами, их труднее читать, и их нельзя скопировать и вставить. Если вы измените скриншот с помощью скопированного блока показанного кода, я с радостью отзову свой отрицательный голос.
@Майкл М. Вы хотите, чтобы файловая структура также была записана?
Нет, это законная причина для использования изображения. Структуры проекта не являются текстом, поскольку представляют собой диаграммы, показывающие связи. Хороший вопрос.
@Майкл М. спасибо, добрый сэр, прошу вас, вы не знаете, как мне поступить?
К сожалению, я не специалист в этом вопросе. Тем не менее, это хороший вопрос, и я проголосовал за него, чтобы привлечь больше внимания. Я также отредактировал его, включив в него соответствующие теги, чтобы больше людей увидели его и помогли. С наилучшими пожеланиями в решении проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У меня та же проблема, но я не могу добавлять комментарии, поэтому я публикую свой прогресс в качестве ответа.
Мне нужно было распространять 3 версии моего приложения: мобильное (гибридное) приложение, скомпилированное с помощью CapacitorJS, онлайн-версию (с некоторыми скрытыми функциями, токенами API и т. д.) и облегченную версию (с минимальными функциями).
Все три приложения совместно используют большинство системных компонентов, и мне было бы очень легко просто собрать три разные версии одновременно.
Мой ближайший подход состоял в том, чтобы использовать 3 точки входа, то есть три разных файла index.html. Однако я не могу отделить каталоги сборки, созданные из сборок. Это мой vite.config.js файл на данный момент:
import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
base: "",
build: {
rollupOptions: {
input: {
web: resolve(__dirname, './index_web.html'),
mobile: resolve(__dirname, './index_mobile.html'),
lite: resolve(__dirname, './index_lite.html'),
},
output: [
{
name: "web",
dir: "dist_web",
},
{
name: "mobile",
dir: "dist_mobile",
},
{
name: "lite",
dir: "dist_lite",
}
]
},
},
});
Как указывалось ранее, этот подход просто создает три папки dist, содержащие вместе три приложения. Возможно, мне не хватает способа связать выходные данные с входными, или есть более простой способ с использованием разных команд сборки.
На данный момент я использую три разных файла vite.config.js и собираю каждую версию с помощью разных команд сборки, объявленных в package.json:
{
"name": "vite-multiple-build",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build-web": "vite build --config vite.config.web.js",
"build-mobile": "vite build --config vite.config.mobile.js",
"build-lite": "vite build --config vite.config.lite.js",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@vitejs/plugin-react": "^2.2.0",
"vite": "^3.2.3"
}
}
Кажется, это работает нормально, единственная проблема заключается в том, что точки входа необходимо переименовывать после создания.
спасибо, попробую на свободе, это был один из моих побочных проектов =))