fix(compiler-sfc): transformAssetUrls.base should not affect known module requests

fix https://github.com/vitejs/vite/issues/1343

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 9e74a95aeba63fb2f07ff25b32763be1eddd53f7..1159b636290b66d6e5957406ccfd3facab70460e 100644 (file)
--- 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 9fdfa77194c25df03ce1ecbe39766bd6b7f23a80..6dbb7680baf55db88af3670d3a9c53184ff2a3be 100644 (file)
--- 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(
       `<img src="./bar.png"></img>` + // -> /foo/bar.png
-      `<img src="~bar.png"></img>` + // -> /foo/bar.png
       `<img src="bar.png"></img>` + // -> bar.png (untouched)
-        `<img src="@theme/bar.png"></img>`, // -> @theme/bar.png (untouched)
+      `<img src="~bar.png"></img>` + // -> still converts to import
+        `<img src="@theme/bar.png"></img>`, // -> 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 7a92f6ea064edc932ff4d472ad5da658d8277de4..64cd22f08d138a9e33b96e76aabf16a20625fc90 100644 (file)
--- 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
       }