Next.js 静态站如何部署在子路径
目录
export 的静态站文件可以直接部署到网站根目录。若需要部署到子路径如何实现?
例如希望部署到 /foo
路径,App访问的首页网址是 https://example.com/foo
通过在 next.config.js
文件中为项目添加一些配置。
首先添加一个常量:
const isProd = process.env.NODE_ENV === "production";
然后在配置参数中添加一个 assetPrefix
:
{assetPrefix: isProd ? "/foo" : "/"}
next.config.js 内容示例:
const isProd = process.env.NODE_ENV === "production";
module.exports = {
assetPrefix: isProd ? "/emoji" : "/",
}
说明:
使用 isProd
条件语句,是因为如果直接设置成 {assetPrefix: "/foo"}
,
此时通过 next export
生成静态站文件,可以正常加载,部署是没有问题的。
但是通过 next dev
在本地测试时,文件会无法正常加载。所以需要通过条件语句来判断一下是否生产环境来动态指定配置键值。
另附上尝试过但错误的方法:
通过配置 basePath: "/foo"
的方式,只能解决首页是通过子路径的方式访问,但是要应用在加载 _next/
路径下的等静态文件时,仍然是从网站根路径尝试访问,而发生找不到文件的情况。
参考文章