Vite 预览正常，但打开index.html 时看不到它运行

Question

我不知道我在这里是否做错了，但我用 vite 启动了一个 vanilla.js 项目，我编写了我的代码，并且一切正常：

npm run dev

（运行

vite

命令）。

但是当我运行

npm run build

并打开

/dist/index.html

时，页面无法正常工作。

可能我做错了什么。

我知道当我运行

npm run build && npm run preview

时它会起作用。但我试图通过仅打开

index.html

文件来使其工作，因为据我所知，这是我可以在 Github 页面上托管它的唯一方法。

Answer 1

我将此添加到我的

vite.config.js

上。

import { defineConfig } from 'vite';

export default defineConfig({
  base: './'
});

发生这种情况是因为我们的导航器无法识别路径

/heres-the-file-or-paths

，所以我需要在导入

./

和

.js

文件时在路径的开头添加

.css

。图标和其他也一样。

这使得构建过程以和

index.html

结束，就像我们的导入路径工作一样。

href="./the-rest-of-the-path-here"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="./vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React</title>
        <script type="module" crossorigin src="./assets/index.b3824f6c.js"></script>
        <link rel="stylesheet" href="./assets/index.3fce1f81.css">
    </head>
    <body>
        <div id="root"></div>
        
    </body>
</html>

我希望这可以帮助你。

Answer 2

我在

vite.config.js

添加了这个，现在它可以工作了！

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/roulette-simulation/'
});

Answer 3

就我而言，我认为我的构建文件已损坏，因此我使用

npm run build

重新构建整个项目，然后我开始预览模式

npm run preview

Vite 预览正常，但打开index.html 时看不到它运行

问题描述投票：0回答：3

3个回答

最新问题

Vite 预览正常，但打开index.html 时看不到它运行

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3