fix(compiler-sfc): do not transform external and data urls in templates

Author: yyx990803

packages/compiler-sfc/src/templateCompilerModules/utils.ts

@@ -14,8 +14,11 @@ export function urlToRequire(
     url = url.slice(secondChar === '/' ? 2 : 1)
   }
 
-  const uriParts = parseUriParts(url)
+  if (isExternalUrl(url) || isDataUrl(url) || firstChar === '#') {
+    return returnValue
+  }
 
+  const uriParts = parseUriParts(url)
   if (transformAssetUrlsOption.base) {
     // explicit base - directly rewrite the url into absolute url
     // does not apply to absolute urls or urls that start with `@`
@@ -67,3 +70,13 @@ function parseUriParts(urlString: string): UrlWithStringQuery {
   }
   return returnValue
 }
+
+const externalRE = /^(https?:)?\/\//
+function isExternalUrl(url: string): boolean {
+  return externalRE.test(url)
+}
+
+const dataUrlRE = /^\s*data:/i
+function isDataUrl(url: string): boolean {
+  return dataUrlRE.test(url)
+}

packages/compiler-sfc/test/compileStyle.spec.ts

@@ -9,7 +9,7 @@ test('preprocess less', () => {
       '.color { color: @red; }\n' +
       '</style>\n',
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).styles[0]
 
   const result = compileStyle({
@@ -34,7 +34,7 @@ test('preprocess scss', () => {
       '.color { color: $red; }\n' +
       '</style>\n',
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).styles[0]
   const result = compileStyle({
     id: 'v-scope-xxx',
@@ -59,7 +59,7 @@ test('preprocess sass', () => {
       '   color: $red\n' +
       '</style>\n',
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).styles[0]
   const result = compileStyle({
     id: 'v-scope-xxx',
@@ -84,7 +84,7 @@ test('preprocess stylus', () => {
       '   color: red-color\n' +
       '</style>\n',
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).styles[0]
   const result = compileStyle({
     id: 'v-scope-xxx',

packages/compiler-sfc/test/compileTemplate.spec.ts

@@ -48,7 +48,7 @@ test('preprocess pug', () => {
       '   p Cool Pug example!\n' +
       '</template>\n',
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).template as SFCBlock
 
   const result = compileTemplate({
@@ -103,7 +103,7 @@ test('warn missing preprocessor', () => {
     source: '<template lang="unknownLang">\n' + '</template>\n',
 
     filename: 'example.vue',
-    needMap: true
+    sourceMap: true
   }).template as SFCBlock
 
   const result = compileTemplate({
@@ -141,7 +141,6 @@ test('transform assetUrls', () => {
 })
 
 test('transform srcset', () => {
-  // TODO:
   const source = `
 <div>
   <img src="./logo.png">
@@ -227,3 +226,29 @@ test('transform assetUrls and srcset with base option', () => {
     '/base/logo.png 2x, /base/logo.png 3x'
   )
 })
+
+test('transform with includeAbsolute', () => {
+  const source = `
+  <div>
+    <img src="./logo.png">
+    <img src="/logo.png">
+    <img src="https://foo.com/logo.png">
+  </div>
+  `
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source,
+    transformAssetUrls: true,
+    transformAssetUrlsOptions: { includeAbsolute: true }
+  })
+
+  expect(result.errors.length).toBe(0)
+
+  const vnode = mockRender(result.code, {
+    './logo.png': 'relative',
+    '/logo.png': 'absolute'
+  })
+  expect(vnode.children[0].data.attrs.src).toBe('relative')
+  expect(vnode.children[2].data.attrs.src).toBe('absolute')
+  expect(vnode.children[4].data.attrs.src).toBe('https://foo.com/logo.png')
+})