fix: use output.assetPrefix in none mode

e2e/cases/assets/asset-prefix/index.test.ts

@@ -96,3 +96,24 @@ test('should inject assetPrefix to env var and template correctly', async ({
   await expect(page.locator('#prefix2')).toHaveText('http://example.com');
   await rsbuild.close();
 });
+
+test('should use output.assetPrefix in none mode', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      mode: 'none',
+      dev: {
+        assetPrefix: 'http://dev.com',
+      },
+      output: {
+        assetPrefix: 'http://prod.com',
+      },
+    },
+  });
+
+  const files = await rsbuild.getDistFiles();
+  const indexHtml =
+    files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
+  expect(indexHtml).toContain('http://prod.com');
+  expect(indexHtml).not.toContain('http://dev.com');
+});

packages/core/src/plugins/output.ts

@@ -14,19 +14,20 @@ import type {
 } from '../types';
 
 function getPublicPath({
-  isProd,
+  isDev,
   config,
   context,
 }: {
-  isProd: boolean;
+  isDev: boolean;
   config: NormalizedEnvironmentConfig;
   context: RsbuildContext;
 }) {
   const { dev, output, server } = config;
 
   let publicPath = DEFAULT_ASSET_PREFIX;
 
-  if (isProd) {
+  // If `mode` is `production` or `none`, use `output.assetPrefix`
+  if (!isDev) {
     if (typeof output.assetPrefix === 'string') {
       publicPath = output.assetPrefix;
     }
@@ -53,7 +54,7 @@ function getPublicPath({
   }
 
   const defaultPort = server.port ?? DEFAULT_PORT;
-  const port = isProd ? defaultPort : (context.devServer?.port ?? defaultPort);
+  const port = isDev ? (context.devServer?.port ?? defaultPort) : defaultPort;
   return formatPublicPath(replacePortPlaceholder(publicPath, port));
 }
 
@@ -77,12 +78,12 @@ export const pluginOutput = (): RsbuildPlugin => ({
 
   setup(api) {
     api.modifyBundlerChain(
-      async (chain, { CHAIN_ID, isProd, isServer, environment }) => {
+      async (chain, { CHAIN_ID, isDev, isProd, isServer, environment }) => {
         const { distPath, config } = environment;
 
         const publicPath = getPublicPath({
           config,
-          isProd,
+          isDev,
           context: api.context,
         });
 

packages/core/tests/output.test.ts

@@ -150,20 +150,6 @@ describe('plugin-output', () => {
     expect(bundlerConfigs[0]).toMatchSnapshot();
   });
 
-  it('should allow dev.assetPrefix to be `auto`', async () => {
-    const rsbuild = await createStubRsbuild({
-      plugins: [pluginOutput()],
-      rsbuildConfig: {
-        dev: {
-          assetPrefix: 'auto',
-        },
-      },
-    });
-
-    const bundlerConfigs = await rsbuild.initConfigs();
-    expect(bundlerConfigs[0]?.output?.publicPath).toEqual('auto');
-  });
-
   it('should replace `<port>` placeholder with default port', async () => {
     vi.stubEnv('NODE_ENV', 'development');
     const rsbuild = await createStubRsbuild({

website/docs/en/config/dev/asset-prefix.mdx

@@ -7,7 +7,7 @@ Set the URL prefix of static assets in [development mode](/config/mode).
 
 `assetPrefix` will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.
 
-This config is only used in development mode. In the production mode, please use the [output.assetPrefix](/config/output/asset-prefix) to set the URL prefix.
+This config is only used in `development` mode. In `production` mode or `none` mode, use the [output.assetPrefix](/config/output/asset-prefix) to set the URL prefix.
 
 ## Default value
 
@@ -32,7 +32,7 @@ export default {
 
 If `assetPrefix` is set to `true`, the URL prefix will be `http://localhost:<port>/`:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: true,
@@ -54,7 +54,7 @@ When the value of `assetPrefix` is a `string` type, the string will be used as a
 
 - For example, set to a path relative to the root directory:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/example/',
@@ -70,7 +70,7 @@ The resource URL loaded in the browser is as follows:
 
 - For example, set to a complete URL:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: 'https://example.com/assets/',

website/docs/en/config/mode.mdx

@@ -53,6 +53,7 @@ If the value of `mode` is `development`:
 - The `import.meta.env.MODE` in the source code will be replaced with `'development'`.
 - The `import.meta.env.DEV` in the source code will be replaced with `true`.
 - The `import.meta.env.PROD` in the source code will be replaced with `false`.
+- Use the value of [dev.assetPrefix](/config/dev/asset-prefix) as the URL prefix for static assets.
 
 ## Production mode
 
@@ -67,6 +68,7 @@ If the value of `mode` is `production`:
 - The `import.meta.env.MODE` in the source code will be replaced with `'production'`.
 - The `import.meta.env.DEV` in the source code will be replaced with `false`.
 - The `import.meta.env.PROD` in the source code will be replaced with `true`.
+- Use the value of [output.assetPrefix](/config/output/asset-prefix) as the URL prefix for static assets.
 
 ## None mode
 
@@ -77,3 +79,4 @@ If the value of `mode` is `none`:
 - The `import.meta.env.MODE` in the source code will be replaced with `'none'`.
 - The `import.meta.env.DEV` in the source code will be replaced with `false`.
 - The `import.meta.env.PROD` in the source code will be replaced with `false`.
+- Use the value of [output.assetPrefix](/config/output/asset-prefix) as the URL prefix for static assets.

website/docs/en/config/output/asset-prefix.mdx

@@ -7,23 +7,23 @@ In [production mode](/config/mode), use this option to set the URL prefix for st
 
 `assetPrefix` will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.
 
-This config is only used in production mode. In development mode, please use the [dev.assetPrefix](/config/dev/asset-prefix) to set the URL prefix.
+This config is only used in `production` mode or `none` mode. In `development` mode, use the [dev.assetPrefix](/config/dev/asset-prefix) to set the URL prefix.
 
 ## Example
 
 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
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: 'https://cdn.example.com/assets/',
   },
 };
 ```
 
-After the build, the URL of the JS file will be:
+After the build, the URL of the JS bundle in the HTML file will be:
 
 ```html
 <script
@@ -34,15 +34,15 @@ After the build, the URL of the JS file will be:
 
 - Setting it to a relative path:
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: './',
   },
 };
 ```
 
-After the build, the URL of the JS file will be:
+After the build, the URL of the JS bundle in the HTML file will be:
 
 ```html
 <script defer src="./static/js/index.ebc4ff4f.js"></script>

website/docs/zh/config/dev/asset-prefix.mdx

@@ -7,7 +7,7 @@
 
 `assetPrefix` 会影响构建产物中绝大部分静态资源的 URL，包括 JavaScript 文件、CSS 文件、图片、视频等。如果指定了一个错误的值，则在加载这些资源时可能会出现 404 错误。
 
-该配置项仅用于开发模式。在生产模式下，请使用 [output.assetPrefix](/config/output/asset-prefix) 配置项进行设置。
+该配置项仅用于 `development` 模式。在 `production` 模式或 `none` 模式下，请使用 [output.assetPrefix](/config/output/asset-prefix) 配置项进行设置。
 
 ## 默认值
 
@@ -17,7 +17,7 @@
 
 需要注意的是，当自定义 `dev.assetPrefix` 选项时，如果希望静态资源能够通过 Rsbuild 开发服务器正常访问到，`dev.assetPrefix` 应和 `server.base` 包含相同的 URL 前缀，如：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/foo/bar/',
@@ -32,7 +32,7 @@ export default {
 
 如果设置 `assetPrefix` 为 `true`，Rsbuild 会使用 `http://localhost:<port>/` 作为 URL 前缀：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: true,
@@ -54,7 +54,7 @@ export default {
 
 - 比如设置为相对于根目录的路径：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: '/example/',
@@ -70,7 +70,7 @@ export default {
 
 - 比如设置为完整 URL：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: 'https://example.com/assets/',
@@ -93,7 +93,7 @@ Rsbuild server 监听的端口号可能会发生变更。比如，当端口被
 - 开启 [server.strictPort](/config/server/strict-port)。
 - 使用 `<port>` 占位符来指代当前端口号，Rsbuild 会将占位符替换为实际监听的端口号。
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   dev: {
     assetPrefix: 'http://localhost:<port>/',

website/docs/zh/config/mode.mdx

@@ -53,6 +53,7 @@ export default {
 - 源代码中的 `import.meta.env.MODE` 会被替换为 `'development'`。
 - 源代码中的 `import.meta.env.DEV` 会被替换为 `true`。
 - 源代码中的 `import.meta.env.PROD` 会被替换为 `false`。
+- 使用 [dev.assetPrefix](/config/dev/asset-prefix) 的值作为静态资源的 URL 前缀。
 
 ## Production 模式
 
@@ -67,6 +68,7 @@ export default {
 - 源代码中的 `import.meta.env.MODE` 会被替换为 `'production'`。
 - 源代码中的 `import.meta.env.DEV` 会被替换为 `false`。
 - 源代码中的 `import.meta.env.PROD` 会被替换为 `true`。
+- 使用 [output.assetPrefix](/config/output/asset-prefix) 的值作为静态资源的 URL 前缀。
 
 ## None 模式
 
@@ -77,3 +79,4 @@ export default {
 - 源代码中的 `import.meta.env.MODE` 会被替换为 `'none'`。
 - 源代码中的 `import.meta.env.DEV` 会被替换为 `false`。
 - 源代码中的 `import.meta.env.PROD` 会被替换为 `false`。
+- 使用 [output.assetPrefix](/config/output/asset-prefix) 的值作为静态资源的 URL 前缀。

website/docs/zh/config/output/asset-prefix.mdx

@@ -7,23 +7,23 @@
 
 `assetPrefix` 会影响构建产物中绝大部分静态资源的 URL，包括 JavaScript 文件、CSS 文件、图片、视频等。如果指定了一个错误的值，则在加载这些资源时可能会出现 404 错误。
 
-该配置项仅用于生产模式。在开发模式下，请使用 [dev.assetPrefix](/config/dev/asset-prefix) 配置项进行设置。
+该配置项仅用于 `production` 模式或 `none` 模式。在 `development` 模式下，请使用 [dev.assetPrefix](/config/dev/asset-prefix) 配置项进行设置。
 
 ## 示例
 
 设置 `output.assetPrefix` 后，JavaScript、CSS、图片等静态资源的 URL 都会加上 `output.assetPrefix` 的值作为前缀。
 
 - 例如，设置为一个 CDN 地址：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: 'https://cdn.example.com/assets/',
   },
 };
 ```
 
-构建后，JS 文件的 URL 如下：
+构建后，HTML 产物中加载 JS bundle 的 URL 如下：
 
 ```html
 <script
@@ -34,15 +34,15 @@ export default {
 
 - 设置为相对路径：
 
-```js
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: './',
   },
 };
 ```
 
-构建后，JS 文件的 URL 如下：
+构建后，HTML 产物中加载 JS bundle 的 URL 如下：
 
 ```html
 <script defer src="./static/js/index.ebc4ff4f.js"></script>
@@ -56,7 +56,7 @@ export default {
 
 需要注意的是，当自定义 `output.assetPrefix` 选项时，如果希望静态资源能够通过 Rsbuild 预览服务器正常访问，`output.assetPrefix` 应和 `server.base` 包含相同的 URL 前缀，如：
 
-```ts
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     assetPrefix: '/foo/bar/',