diff --git a/website/docs/en/config/output/asset-prefix.mdx b/website/docs/en/config/output/asset-prefix.mdx index 2d977be987..4fbf88b4ce 100644 --- a/website/docs/en/config/output/asset-prefix.mdx +++ b/website/docs/en/config/output/asset-prefix.mdx @@ -11,7 +11,9 @@ This config is only used in production mode. In development mode, please use the ## Example -After setting, the URLs of JavaScript, CSS and other static files will be prefixed with `output.assetPrefix`: +Setting `output.assetPrefix` will add the value as a prefix to the URLs of all static assets like JavaScript, CSS, images, etc. + +- For example, setting it to a CDN address: ```js export default { @@ -21,15 +23,31 @@ export default { }; ``` -After building, you can see that the JS files are loaded from: +After the build, the URL of the JS file will be: ```html ``` +- Setting it to a relative path: + +```js +export default { + output: { + assetPrefix: './', + }, +}; +``` + +After the build, the URL of the JS file will be: + +```html + +``` + ## Default Value The default value of `output.assetPrefix` is the same as [server.base](/config/server/base). @@ -54,6 +72,7 @@ export default { assetPrefix can be set to the following types of paths: - **absolute path**: This is the most common practice, can be specific server paths, like `/assets/`, or setting to CDN paths, like `https://cdn.example.com/assets/`. +- **relative path**: such as `./assets/`. - **'auto'**: Rspack will automatically calculate the path and generate relative paths based on file location. :::tip diff --git a/website/docs/zh/config/output/asset-prefix.mdx b/website/docs/zh/config/output/asset-prefix.mdx index 256526c261..2eb02ff174 100644 --- a/website/docs/zh/config/output/asset-prefix.mdx +++ b/website/docs/zh/config/output/asset-prefix.mdx @@ -11,7 +11,9 @@ ## 示例 -设置后,项目的 JavaScript、CSS、图片等静态资源的 URL 都会加上 `output.assetPrefix` 作为前缀: +设置 `output.assetPrefix` 后,JavaScript、CSS、图片等静态资源的 URL 都会加上 `output.assetPrefix` 的值作为前缀。 + +- 例如,设置为一个 CDN 地址: ```js export default { @@ -21,15 +23,31 @@ export default { }; ``` -构建之后,可以看到 JS 文件从以下地址加载: +构建后,JS 文件的 URL 如下: ```html ``` +- 设置为相对路径: + +```js +export default { + output: { + assetPrefix: './', + }, +}; +``` + +构建后,JS 文件的 URL 如下: + +```html + +``` + ## 默认值 `output.assetPrefix` 的默认值与 [server.base](/config/server/base) 相同。 @@ -54,10 +72,11 @@ export default { assetPrefix 可以设置为以下类型的路径: - **绝对路径**:这是最常见的做法,可以为指定服务器路径,比如 `/assets/`,或是设置为 CDN 路径,比如 `https://cdn.example.com/assets/`。 +- **相对路径**:比如 `./assets/`。 - **'auto'**:Rspack 将自动计算路径,并生成基于文件所在位置的相对路径。 :::tip -不建议将 assetPrefix 设置为相对路径,比如 `'./assets/'`。因为当资源位于不同的路径深度时,使用相对路径可能会导致资源无法正确加载。 +通常不建议将 assetPrefix 设置为相对路径,因为当资源位于不同的路径深度时,使用相对路径可能会导致资源无法正确加载。 ::: ## 对比 `publicPath`