diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 9e74a95aeba..1159b636290 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -72,13 +72,16 @@ export function render(_ctx, _cache) {
exports[`compiler sfc: transform asset url with explicit base 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+import _imports_0 from 'bar.png'
+import _imports_1 from '@theme/bar.png'
+
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [
- _createVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
_createVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
_createVNode(\\"img\\", { src: \\"bar.png\\" }),
- _createVNode(\\"img\\", { src: \\"@theme/bar.png\\" })
+ _createVNode(\\"img\\", { src: _imports_0 }),
+ _createVNode(\\"img\\", { src: _imports_1 })
], 64 /* STABLE_FRAGMENT */))
}"
`;
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
index 9fdfa77194c..6dbb7680baf 100644
--- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
@@ -59,13 +59,15 @@ describe('compiler sfc: transform asset url', () => {
test('with explicit base', () => {
const { code } = compileWithAssetUrls(
`` + // -> /foo/bar.png
- `` + // -> /foo/bar.png
`` + // -> bar.png (untouched)
- ``, // -> @theme/bar.png (untouched)
+ `` + // -> still converts to import
+ ``, // -> still converts to import
{
base: '/foo'
}
)
+ expect(code).toMatch(`import _imports_0 from 'bar.png'`)
+ expect(code).toMatch(`import _imports_1 from '@theme/bar.png'`)
expect(code).toMatchSnapshot()
})
diff --git a/packages/compiler-sfc/src/templateTransformAssetUrl.ts b/packages/compiler-sfc/src/templateTransformAssetUrl.ts
index 7a92f6ea064..64cd22f08d1 100644
--- a/packages/compiler-sfc/src/templateTransformAssetUrl.ts
+++ b/packages/compiler-sfc/src/templateTransformAssetUrl.ts
@@ -113,26 +113,20 @@ export const transformAssetUrl: NodeTransform = (
}
const url = parseUrl(attr.value.content)
- if (options.base) {
- // explicit base - directly rewrite the url into absolute url
- // does not apply to absolute urls or urls that start with `@`
- // since they are aliases
- if (
- attr.value.content[0] !== '@' &&
- isRelativeUrl(attr.value.content)
- ) {
- // Allow for full hostnames provided in options.base
- const base = parseUrl(options.base)
- const protocol = base.protocol || ''
- const host = base.host ? protocol + '//' + base.host : ''
- const basePath = base.path || '/'
+ if (options.base && attr.value.content[0] === '.') {
+ // explicit base - directly rewrite relative urls into absolute url
+ // to avoid generating extra imports
+ // Allow for full hostnames provided in options.base
+ const base = parseUrl(options.base)
+ const protocol = base.protocol || ''
+ const host = base.host ? protocol + '//' + base.host : ''
+ const basePath = base.path || '/'
- // when packaged in the browser, path will be using the posix-
- // only version provided by rollup-plugin-node-builtins.
- attr.value.content =
- host +
- (path.posix || path).join(basePath, url.path + (url.hash || ''))
- }
+ // when packaged in the browser, path will be using the posix-
+ // only version provided by rollup-plugin-node-builtins.
+ attr.value.content =
+ host +
+ (path.posix || path).join(basePath, url.path + (url.hash || ''))
return
}