Vue press not loading the css and js files on building the project

[THARAKS]

I am using the latest version

• I confirm that this is an issue rather than a question.

you can find the complete issue on this link
https://stackoverflow.com/questions/57965012/vuepress-builds-broken-html-with-invalid-adresses-to-assets

please give me a solution

Bug report

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

• Output of npx vuepress info in my VuePress project:

[PeppeL-G]

The paths to the CSS and JS files in index.html are absolute (starts with /), so viewing index.html using the file protocol doesn't work (you need to host it on a server so the HTTP protocol are used).

[THARAKS]

I do not want to host it on any server , i want to load the documentation as a static files, is that not possible

[PeppeL-G]

Loading the files on your own computer using the file protocol doesn't work, the files must be loaded using the HTTP protocol. But I guess you can simply use the npm package http-server (or similar) to serve the file over HTTP on your own computer.

[Shrishb]

I have deployed it on netlify, but face the same issue there as well . https://technotes-543930.netlify.com/

[PeppeL-G]

@Shrishb You have set the base config to /technotes/? You shouldn't do that, you host your VuePress app at the root path of https://technotes-543930.netlify.com/.

[haoranpb]

I think @PeppeL-G is right. See relative vue-cli document

If you prefer python and have python3 installed in your path, the code below should also work

cd path/to/dist
python3 -m http.server

[Samk13]

Had same problem, I fix it by going to .vuepress/config.js and change :
base: '/<REPO>/' to https://<username>.github.io/<repo>/
it works ! but the URL is doubled https://samk13.github.io/https:/samk13.github.io/sam-snippets.github.io/
while if I check the index.html the css and js links looks correct with no double urls. someone can see what I miss here ? 🤔

[PeppeL-G]

@Samk13 See: https://vuepress.vuejs.org/guide/deploy.html#github-pages

For example, I use base: "/course-material/", and that works for me.

[Poikilos]

I ran into a similar issue with a subdirectory on a website

cd src
../node_modules/.bin/vuepress build

Why: Even if I cd to src, yarn will run vuepress build from the base of the repo (the directory containing package.json), and so it ignores .vuepress in src.

Details

I gave a complete explanation, including making the website from scratch and setting the correct config.js settings at an article I just made: Use VuePress to build static html files (on my website).

Start at the "Static html file build settings" or just make sure of the following in config.js (this is a short summary of my solution at the article):

• paths are relative to src
• you must run vuepress build from src or other directory containing .vuepress (not via yarn/npm/npx, which are liable to change the working directory)
• regarding base and dest settings in config.js: If it is a sub-sub directory of some kind, you must have the same number of slashes in base, plus one at the end, as are after /var/www/html in dest.

Consider closing the issue if everything works using those instructions.

If you have further questions you can ask.