告诉vite内联外部脚本

Question

我希望我能稍微一致地问这个问题。我在一个情况下，我的vite生产构建不工作，但开发构建可以。

我在一个静态渲染的网站，在一个文件夹site内，然后由vite创建最终输出。我主要在子文件夹_svelte中工作。在那里，我还有一个名为api的文件夹，其中包含一些功能，我想在苗条之外使用。

在site中，有另一个html页面，我们说test/index.html。该页包含<script type="module">，然后从/_svelte/api导入这些函数。

现在，这一切都在开发中工作，但在生产中，test/index.html的包包含对脚本路径的引用，如/_svelte/api等。但是这些文件根本不存在，所以一切都失败了。

我的vite配置是这样的:

export default defineConfig(({ command, mode }) => {
if (command === 'build') {
// these are all entry files for vite
const files = fg.sync('**/*.html', {
cwd: process.env.ROOT,
absolute: true,
});
const external = fg.sync('../_svelte/**/*.ts', {
cwd: process.env.ROOT,
absolute: true,
})
.map((file) => file.replace(`${__dirname}/site`, ''))
.filter((file) => !file.includes('main') && !file.includes('vite-env.d.ts'))
.map((file) => file.replace('.ts', ''));
return {
plugins: [svelte({ configFile: '../../svelte.config.js' })],
root: process.env.ROOT,
build: {
publicDir: '../public',
rollupOptions: {
input: {
main: resolve(process.env.ROOT, 'index.html'),
...Object.fromEntries(
files.map((file) => [basename(file.replace('/index', ''), '.html'), file])
),
},
external,
},
},
};
}
});

我希望这是足够的信息在某种程度上帮助我在这种情况下。我不知道如何修复它，它是相当不透明的。

Answer 1

这个Vite构建插件允许您将所有JavaScript和CSS资源直接内联到最终的dist/index.html文件中。通过这样做，你的整个web应用程序可以嵌入和分发为一个单一的HTML文件。

https://github.com/richardtallent/vite-plugin-singlefile

1. installnpm install vite-plugin-singlefile --save-dev

2. 添加到vite.config.js

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteSingleFile } from "vite-plugin-singlefile"
export default defineConfig({
plugins: [vue(), viteSingleFile()],
})