From b6b5201e0e53b7c0d3af5ece9f20520ef15d0c45 Mon Sep 17 00:00:00 2001 From: 2359634711 <2359634711@qq.com> Date: Wed, 21 Jul 2021 17:17:28 +0800 Subject: [PATCH 1/5] fix: Allow custom URL prefix in CSS --- docs/config/index.md | 14 ++++++++++++++ packages/vite/src/node/plugins/css.ts | 6 ++++++ 2 files changed, 20 insertions(+) diff --git a/docs/config/index.md b/docs/config/index.md index e333c277635e9a..39241a3f98a029 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -253,6 +253,20 @@ export default async ({ command, mode }) => { } ``` +### css.publicPath + +- **Type:** `string` + + The option lets users can customize url prefixes. Example: + + ```js + export default { + css: { + publicPath: 'http://127.0.0.1:8080/' + } + } + ``` + ### json.namedExports - **Type:** `boolean` diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 8b3108ab8b6b80..e7d8ec39f706ac 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -56,6 +56,7 @@ export interface CSSOptions { | (Postcss.ProcessOptions & { plugins?: Postcss.Plugin[] }) + publicPath?: string } export interface CSSModulesOptions { @@ -158,6 +159,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin { } const resolved = await resolveUrl(url, importer) if (resolved) { + if (config?.css?.publicPath) { + return ( + config.css.publicPath + path.posix.relative(config.root, resolved) + ) + } return fileToUrl(resolved, config, this) } return url From d1f08103c61ae85dbb189fa450e841c2658817fa Mon Sep 17 00:00:00 2001 From: 2359634711 <2359634711@qq.com> Date: Wed, 21 Jul 2021 19:14:26 +0800 Subject: [PATCH 2/5] fix: Allow custom URL prefix in CSS --- docs/config/index.md | 2 +- packages/vite/src/node/plugins/css.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index 39241a3f98a029..a0ab67ab0ec59a 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -257,7 +257,7 @@ export default async ({ command, mode }) => { - **Type:** `string` - The option lets users can customize url prefixes. Example: + This option allows the user to customize the URL prefix. Example: ```js export default { diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index e7d8ec39f706ac..43e811043152fc 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -160,9 +160,10 @@ export function cssPlugin(config: ResolvedConfig): Plugin { const resolved = await resolveUrl(url, importer) if (resolved) { if (config?.css?.publicPath) { - return ( - config.css.publicPath + path.posix.relative(config.root, resolved) - ) + return [ + config.css.publicPath, + path.posix.relative(config.root, resolved) + ].join('') } return fileToUrl(resolved, config, this) } From 19f539d491642d10b0eb7fddcbb0666df0ade850 Mon Sep 17 00:00:00 2001 From: 2359634711 <2359634711@qq.com> Date: Wed, 21 Jul 2021 19:27:35 +0800 Subject: [PATCH 3/5] fix: Allow custom URL prefix in CSS --- packages/vite/src/node/plugins/css.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 43e811043152fc..e7d8ec39f706ac 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -160,10 +160,9 @@ export function cssPlugin(config: ResolvedConfig): Plugin { const resolved = await resolveUrl(url, importer) if (resolved) { if (config?.css?.publicPath) { - return [ - config.css.publicPath, - path.posix.relative(config.root, resolved) - ].join('') + return ( + config.css.publicPath + path.posix.relative(config.root, resolved) + ) } return fileToUrl(resolved, config, this) } From a22fbac2a44bf6b5b2edc90a0d865c1a7fd30e92 Mon Sep 17 00:00:00 2001 From: 2359634711 <2359634711@qq.com> Date: Mon, 26 Jul 2021 14:08:54 +0800 Subject: [PATCH 4/5] fix: Allow custom URL prefix in CSS move the option to server --- packages/vite/src/node/plugins/asset.ts | 3 ++- packages/vite/src/node/plugins/css.ts | 6 ------ packages/vite/src/node/server/index.ts | 1 + 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index a44622c256ad44..50ecdaa98786f1 100644 --- a/packages/vite/src/node/plugins/asset.ts +++ b/packages/vite/src/node/plugins/asset.ts @@ -175,7 +175,8 @@ function fileToDevUrl(id: string, config: ResolvedConfig) { // (this is special handled by the serve static middleware rtn = path.posix.join(FS_PREFIX + id) } - return config.base + rtn.replace(/^\//, '') + const publicPath = config.server?.publicPath || '' + return publicPath + config.base + rtn.replace(/^\//, '') } export function getAssetFilename( diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index e7d8ec39f706ac..8b3108ab8b6b80 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -56,7 +56,6 @@ export interface CSSOptions { | (Postcss.ProcessOptions & { plugins?: Postcss.Plugin[] }) - publicPath?: string } export interface CSSModulesOptions { @@ -159,11 +158,6 @@ export function cssPlugin(config: ResolvedConfig): Plugin { } const resolved = await resolveUrl(url, importer) if (resolved) { - if (config?.css?.publicPath) { - return ( - config.css.publicPath + path.posix.relative(config.root, resolved) - ) - } return fileToUrl(resolved, config, this) } return url diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index 72bad509077675..614a8d1bfc778f 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -127,6 +127,7 @@ export interface ServerOptions { * Options for files served via '/\@fs/'. */ fs?: FileSystemServeOptions + publicPath?: string } export interface ResolvedServerOptions extends ServerOptions { From f1d87d635c2c3fc5d67a711c9110226b3faf06ac Mon Sep 17 00:00:00 2001 From: 2359634711 <2359634711@qq.com> Date: Mon, 26 Jul 2021 14:11:18 +0800 Subject: [PATCH 5/5] fix: Allow custom URL prefix in CSS move the option to server --- docs/config/index.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index a0ab67ab0ec59a..ab0b831e05bd7c 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -253,20 +253,6 @@ export default async ({ command, mode }) => { } ``` -### css.publicPath - -- **Type:** `string` - - This option allows the user to customize the URL prefix. Example: - - ```js - export default { - css: { - publicPath: 'http://127.0.0.1:8080/' - } - } - ``` - ### json.namedExports - **Type:** `boolean` @@ -538,6 +524,20 @@ createServer() } ``` +### server.publicPath + +- **Type:** `string` + + This option allows the user to customize the URL prefix. Example: + + ```js + export default { + server: { + publicPath: 'http://127.0.0.1:8080/' + } + } + ``` + ## Build Options ### build.target