告诉VITE到内联外部脚本

发布于 2025-02-12 10:13:02 字数 1662 浏览 1 评论 0原文

我希望我能有些一致地问这个问题。我处于我的Vite生产构建不起作用的情况，但是开发人员的构建确实如此。

我在文件夹站点中，在一个静态渲染的站点中，然后由Vite采用以创建最终输出。我主要在子文件夹_svelte中工作。在那里，我还有一个称为api的文件夹，其中包含一些功能，我想在Svelte之外使用这些功能。

在网站中，还有另一个HTML页面，假设test/index.html。该页面包含一个＆lt; script type =“模块”＆gt;，然后从/_ Svelte/api中导入这些功能。

现在，这一切都在DEV中起作用，但是在生产中，用于test/index.html的捆绑包包含对脚本路径的引用，如/_ svelte/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,
        },
      },
    };
  }
});

我希望这足以以某种方式帮助我在这种情况下。我不确定如何修复它，这一切都不透明。

原文

I hope I can ask this question somewhat congruently. I am in a situation where my vite production build does not work, but the dev build does.

I am in a statically rendered site, inside a folder site, that then is taken by vite to create the final output. I work mainly in a subfolder _svelte. In there, I also have a folder called api that contains some functions, that I would like to use outside of svelte.

In site, there is another html page, let's say test/index.html. That page contains a <script type="module">, which then imports these functions from /_svelte/api.

Now, this all works in dev, but in production, the bundle for test/index.html contains references to the script paths, as in /_svelte/api, etc. But these files never exist, so it all fails.

My vite config looks like this:

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,
        },
      },
    };
  }
});

I hope this is enough information somehow to help me in this situation. I am not sure how to fix it, it's all rather opaque.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

懒猫 2025-02-19 10:13:02

此Vite Build插件使您可以将所有JavaScript和CSS资源直接嵌入到最终的dist/index.html文件中。通过这样做，您的整个Web应用程序可以作为单个HTML文件嵌入并分发。

https：//github.com/richardtalent/richardtallent/vite-plugin-plugin-singlefile

安装NPM安装Vite-Plugin-Singlefile -Save-dev
添加到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()],
})

This Vite build plugin allows you to inline all JavaScript and CSS resources directly into the final dist/index.html file. By doing this, your entire web app can be embedded and distributed as a single HTML file.

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

install npm install vite-plugin-singlefile --save-dev
Add to 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()],
})

回复收藏 0 原文

~没有更多了~