Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why the css and js files import fail after I build? In other words, the styles are lost and the web pages are messed up. #4165

Open
rosa5500 opened this issue Aug 28, 2024 · 7 comments
Labels
need more info Further information is requested

Comments

@rosa5500
Copy link

rosa5500 commented Aug 28, 2024

Why the css and js files import fail after I npm run build? In other words, the styles are lost and the web pages are messed up.

Whether or not to set base is the same.

The following is the dist without the base (taking example.html as an example):
image
image
image

As long as I change "href="/assets/style.eGqldYn-.css" to href="assets/style.eGqldYn-.css", the style will return to normal.
image

Is there something wrong with the config.ts?

thanks very much~


为什么我build之后,css和js文件的引入失败呢?也就是说,样式丢失,网页错乱

无论加不加base属性都是如此。

以下是没有加base属性的dist文件(以example.html为例):
image
image
image

只要我将 href="/assets/style.eGqldYn-.css" 改成 href="assets/style.eGqldYn-.css",样式就恢复正常了。
image

是哪里的配置写错了吗?

非常感谢

@brc-dd
Copy link
Member

brc-dd commented Aug 28, 2024

How are you serving the generated files? Directly opening html files in browser won't work. Run npm run docs:preview (vitepress preview docs).

@brc-dd brc-dd added the need more info Further information is requested label Aug 28, 2024
@rosa5500
Copy link
Author

How are you serving the generated files? Directly opening html files in browser won't work. Run npm run docs:preview (vitepress preview docs).

How do I deploy on Jenkins? At present, I have put the dist file generated by build into the server. Opening the page results in a distorted style.
Additionally, npm run docs: preview is correct locally.
Thank you.

Jenkins deployment command
image

@brc-dd
Copy link
Member

brc-dd commented Aug 28, 2024

Do you see any errors on console or network tab in browser dev tools?

@rosa5500
Copy link
Author

Do you see any errors on console or network tab in browser dev tools?

On the website:
image

@rosa5500
Copy link
Author

Do you see any errors on console or network tab in browser dev tools?

Do you see any errors on console or network tab in browser dev tools?

Right click to view webpage source code:
image

@rosa5500
Copy link
Author

Do you see any errors on console or network tab in browser dev tools?

Very strange. The same code, I will have an additional "/" locally, while the website only has one "/ "normally, but it also failed to import

image

@brc-dd
Copy link
Member

brc-dd commented Aug 28, 2024

In your last image it's showing file:// urls that means you've opened your html directly which isn't and won't be supported.

In image before that it's not able to load those files. I've never used jenkins so can't comment much, but you said that removing / works, does it works in jenkins too? If so, then your base might be wrong. How do you deploy a normal html,css site to jenkins?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
need more info Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants