Vue.js VuePress生成带有无效资产地址的损坏html

在控制台中的

vuepress build docs

加载大量

资源失败后，我的
index.html
被破坏了：net:：ERR\u FILE\u NOT\u

vuepress dev docs

，但是，它可以完全正常工作

我的步骤：

使用vue cli 3创建新项目

制造

纱线添加-D vuepress

添加的文件夹和文件：

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/'
        ]

    }
}

现在，

vuepress dev docs

在

localhost:8080

上给出了我所期望的内容—一切都很好

vuepress build docs

生成

dist

文件夹，其中包含：

• 资产文件夹
• 指南文件夹
• 信息文件夹
• 404.html
• index.html

打开

index.html

时出现问题。所有内容都在没有CSS的情况下显示，链接也不起作用。似乎资产路径有问题

---

为什么在一个全新的项目中，一切都不能开箱即用？

指向

index.html

中CSS和JS文件的路径是绝对的（以

/

开始），因此使用文件协议查看

index.html

不起作用（您需要将其托管在服务器上，以便使用HTTP协议）.

到

index.html

中CSS和JS文件的路径是绝对路径（以

/

开头），因此使用文件协议查看

index.html

不起作用（您需要将其托管在服务器上，以便使用HTTP协议）

module.exports = {
    title: 'Hello VuePress1',
    description: 'Just playing around',
    themeConfig: {
      nav: [
          { text: 'Home', link: '/' },
          { text: 'Guide', link: '/guide/' },
          { text: 'Вернуться в приложение', link: '/desktop/' }
        ],
        sidebar: [
            '/',
            '/guides/',
            '/info/'
        ]

    }
}