I am new to vite, to start with, I don't actually know what kind of structure I need.
I need to build multiple apps but some of them depend on the same ponents.
It worked well by far however I think mixed something
<!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 are wrong, what am I missing?
forgot to attach vite config:
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';
// /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"
}
},
},
})
I am new to vite, to start with, I don't actually know what kind of structure I need.
I need to build multiple apps but some of them depend on the same ponents.
It worked well by far however I think mixed something
<!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 are wrong, what am I missing?
forgot to attach vite config:
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"
}
},
},
})
- Please do not upload images of code/data/errors when asking a question. – Michael M. Commented Oct 21, 2022 at 22:26
- Please see the linked meta post. tl;dr images of code can't be indexed by search engines, they are harder to read, and they can't be copy-pasted. If you change the screenshot with a copy-pasted block of the code shown, then I will happily retract my downvote. – Michael M. Commented Oct 21, 2022 at 22:36
- @MichaelM. do you want the file structure to be written down as well? – Ozan Mudul Commented Oct 21, 2022 at 22:38
- No, that is a legitimate reason for using an image. Project structures are not text because they are charts that show connections. Good question. – Michael M. Commented Oct 21, 2022 at 22:40
- @MichaelM. thank you good sir, so do I kindly ask you do you know any idea how should I proceed? – Ozan Mudul Commented Oct 21, 2022 at 22:41
1 Answer
Reset to default 10I'm having the same issue, but cannot add ments so I'm posting my progress as an answer.
I needed to distribute 3 versions for my app, this is, a Mobile (hybrid) app piled with CapacitorJS, an Online version (with some hidden functionalities, api tokens and such) and a Lite version (with minimal features).
All three apps share most of the system ponents, and it could be very easy to me to just build the three different versions at once.
My closest approach was to use 3 entry points, this is, three different index.html files. However, I cannot separate the build directories that are generated from the builds. This is my vite.config.js file so far:
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",
}
]
},
},
});
As stated before, this approach just builds three dist folders containing the three apps together. Maybe I'm missing a way to link outputs to inputs or there is a simpler way using different build mands.
For now, I'm using three different vite.config.js files, and building each version using different build mands declared in 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"
}
}
This seems to work fine, the only issue is that entry points need to be renamed after building.