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

Question

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

Dan*_*ssi 6 html javascript es6-modules vite

我不知道我在这里是否做错了，但我用 vite 启动了一个 vanilla.js 项目，我编写了我的代码，并且一切都在使用：（npm run dev运行vite命令）。

但是当我运行npm run build并打开该页面时/dist/index.html，该页面不起作用。

可能我做错了什么。

我知道当我运行时npm run build && npm run preview它会起作用。但我试图通过仅打开index.html文件来使其工作，因为据我所知，这是我可以将其托管在 Github 页面上的唯一方法。

Answer 1

Joe*_*zet 7

我在我的vite.config.js.

import { defineConfig } from 'vite';

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

Run Code Online (Sandbox Code Playgroud)

发生这种情况是因为我们的导航器无法识别路径，所以我需要在导入文件时在路径的开头/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>

Run Code Online (Sandbox Code Playgroud)

我希望这可以帮助你。

Answer 2

Dan*_*ssi 0

我添加了这个，vite.config.js现在它可以工作了！

import { defineConfig } from 'vite';

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，9 月前
查看次数：	16526 次
最近记录：	3 年，1 月前