Open luhc228 opened 1 year ago
假设现在在 public 目录下有一些静态资源,要在 Document.tsx 中引入,比如:
Document.tsx
function Document() { return ( <html lang="en"> <head> <script src="/abc.js"></script> </head> </html> ); }
在本地环境下是可以正常访问到 localhost:3000/abc.js 静态资源的。但是如果部署到跨端应用后,跨端应用部署后访问 public 下的静态资源是通过 https://example.com/abc.js ,而 abc.js 仅仅被发到 cdn 上,导致访问失败。
ice.js 3 需要提供跟 rax-app 类似的能力,通过变量的形式修改。
function Document() { return ( <html lang="en"> <head> <script src={import.meta.env.PUBLIC_PATH + "abc.js"}></script> </head> </html> ); }
在构建时统一替换 import.meta.env.PUBLIC_PATH 的值为 publicPath
import.meta.publicPath 会更好一些, env 这里应该是这个变量的输入, 消费的地方已经不是环境变量了, 而是 context.publicPath
import.meta.publicPath
背景
假设现在在 public 目录下有一些静态资源,要在
Document.tsx
中引入,比如:在本地环境下是可以正常访问到 localhost:3000/abc.js 静态资源的。但是如果部署到跨端应用后,跨端应用部署后访问 public 下的静态资源是通过 https://example.com/abc.js ,而 abc.js 仅仅被发到 cdn 上,导致访问失败。
ice.js 3 需要提供跟 rax-app 类似的能力,通过变量的形式修改。
使用方式
在构建时统一替换 import.meta.env.PUBLIC_PATH 的值为 publicPath