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

THARAKS commented 5 years ago

I am using the latest version

[x] 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

PeppeL-G commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

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

Poikilos commented 3 years ago

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.

vuejs / vuepress