VuePress构建SSR时为什么静态资源路径不对？

萌新.艳君提问于 2026-02-06 17:39:26 阅读 28

框架

在开发VuePress主题时遇到了奇怪的问题，当我用vite build构建SSR版本，生成的HTML里静态资源路径变成了绝对路径。比如在主题布局文件里写的<link rel="stylesheet" href="./styles/index.css" rel="external nofollow" >，构建后变成/Users/username/project/styles/index.css"导致404。

我尝试改用require('@/styles/index.css')，但SSR输出的HTML里还是显示完整本地路径。本地用vuepress dev预览没问题，只有打包后的SSR版本有这个问题。搞不懂为啥SSR会直接把本地路径带出来，有没有什么配置能控制资源路径的生成方式？

VuePress

我来解答赞 4 收藏

反馈

2 条解答

___自乐 Lv1

你这个问题是VuePress SSR构建时处理静态资源的默认行为导致的。在SSR构建中，相对路径如果没有正确解析，会回退到文件系统的绝对路径，尤其是在使用href="./xxx"这种写法时容易出问题。

改成这样：

在布局文件中用，并在vuepress.config.js中配置public目录：

module.exports = {

  public: './public', // 确保public目录下有你的styles文件夹

}

把index.css放到public/styles/下面，构建时就不会带上本地路径了，亲测有效。

2026-02-08 12:04

欧阳淑然 Lv1

我一般直接用vite.config.js里的build.rollupOptions.output.assetFileNames控制资源路径，配合publicDir挪公共资源解决这问题。

试试这个配置：

// vite.config.js

export default defineConfig({

  build: {

    rollupOptions: {

      output: {

        assetFileNames: 'assets/[name][extname]'

      }

    },

    publicDir: 'public'

  }

})

把index.css放public/styles/目录，HTML里写/styles/index.css，SSR构建就正常了。

2026-02-06 17:44