VuePress builds broken html with invalid adresses to assets

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:

1. Created new project with vue-cli 3;
2. Made yarn add -D vuepress;
3. 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).