Vite Build is not working

[DasLixou]

Describe the bug

Hello!
I created a simple app with solidjs and vite under the hood and builded it with yarn build.
The dist folder seems fine but when i open the html it just says
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///assets/index.0123ef3f.js. (Reason: CORS request not http).

When i host the html with Live Server it says
The resource from “http://127.0.0.1:5500/assets/index.4e15cac3.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

how can i solve this?

Reproduction

https://github.com/Backlang-Team/docs

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 AMD Ryzen 5 3400G with Radeon Vega Graphics
    Memory: 5.14 GB / 13.92 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vite: ^2.9.9 => 2.9.14

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

The dist folder seems fine but when i open the html it just says

This is because Chrome blocks requests with file protocol for security reasons.

When i host the html with Live Server it says

This is because your server is not responding with the correct mime type. (CSS files should have text/css.)

[dominantranger]

If it works with npm run preview, it's something that needs to be fixed on the deploy steps/configuration. How are you deploying the built site?

oh, do u mean the setting of vite.config.js ?

[sapphi-red]

I mean the configuration of netlify or vercel or whatever hosting sites or server you are using.
If you are not using them and just opening the built html directly by a browser using file protocol, it won't work because of the browsers limitation as I said #9088 (comment).

[dominantranger]

I mean the configuration of netlify or vercel or whatever hosting sites or server you are using. If you are not using them and just opening the built html directly by a browser using file protocol, it won't work because of the browsers limitation as I said #9088 (comment).

I got it, coz I am just opening the build HTML directly. So npm run preview is different from with npm run dev. npm run preview is running the build HTML, right? I think I got it, thank you so much! And I really think Vite is very easy and handy so far, great work!

[matthewhutchings]

I think vite is awful - I am not sure how you find it easy.

[cooldev900]

In my case, yarn preview works but I can't run it on github page.

I am not sure why it is not working.