Nuxt4 +GitHub Pages布署个人主站 / 网络研习社#92

GitHub Pages是个不错的功能，它是GitHub提供的一个免费的静态网站托管服务，它允许 GitHub 用户创建和托管自己的静态网站，这些网站可以通过特定的 GitHub 仓库进行管理和托管。具体的方法可以按GitHub的介绍来就行，不算复杂。

上次的工具升级到喵星后，也给自己的博客主站做了个单独的页面，感觉也还可以。后续就想着不如同步到GitHub Pages上，也多个入口。

Nuxt4是可以生成静态站点的，简单配置后yarn generate就可以啰！再把打包好的文件上传到GitHub Pages就大功告成啰！

不过有些高兴的太早，GitHub Pages好像无法正常显示内容！网络模式下发现很多文件(js和css文件)找不到！如下图所示：

出现404错误！

到文档中一通好找，发现Github Pages 构建部署时候，会忽略隐藏文件比如.文件，_文件的文件也会忽略，而我们的构建产物，刚好是在_nuxt目录下面，这些都被忽略，导致文件找不到。所以在配置时，不要用下划线作为文件夹开头!

做好Nuxt相关配置，再yarn generate重新打包。

//nuxt.config.ts
export default defineNuxtConfig({
    ...
    app: {
        buildAssetsDir: 'nuxt_assets',
    },
    experimental: {
        payloadExtraction: false
    },
    ssr: false,
    ...
})

重新上传到Github Pages上，就显示正常啰！喜欢写博客的朋友们不妨试试哦。

https://lemooljiang.github.io