VuePress builds broken html with invalid adresses to assets - vue.js

Question

I'm getting broken index.html after vuepress build docs with lots of Failed to load resource: net::ERR_FILE_NOT_FOUND in console.
vuepress dev docs, however, works totally fine!
My steps:
Created new project with vue-cli 3;
Made yarn add -D vuepress;
Added folders and files:
-docs
|
--.vuepress
| |
| --config.js
|
--guides
| |
| --README.md
--info
| |
| --README.md
|
--README.md
My config.js:
module.exports = {
title: 'Hello VuePress1',
description: 'Just playing around',
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Вернуться в приложение', link: '/desktop/' }
],
sidebar: [
'/',
'/guides/',
'/info/'
]
}
}
Now, vuepress dev docs gives at localhost:8080 exactly what i expect - everything is fine.
vuepress build docs generates dist folder, which contains:
assets folder
guides folder
info folder
404.html
index.html
Problem arises on opening index.html. Everything is displayed without CSS and links are not working. Seems like problems with paths to assets...
Why everything doesn't work properly out of the box in a completely new project?

Answer 1

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).

Answer 2

you must run http server to open this file.
open cmd in this folder, and run:
with python: python -m http.server
with nodejs:
Install http-server by typing npm install -g http-server
Change into your working directory, where yoursome.html lives
Start your http server by issuing http-server -c-1