feat(compiler-sfc): add transformAssetUrlsBase option

packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap

@@ -36,3 +36,16 @@ export function render(_ctx, _cache) {
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
+
+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\\"
+
+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\\" })
+  ], 64 /* STABLE_FRAGMENT */))
+}"
+`;

packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts

@@ -1,5 +1,8 @@
 import { generate, baseParse, transform } from '@vue/compiler-core'
-import { transformAssetUrl } from '../src/templateTransformAssetUrl'
+import {
+  transformAssetUrl,
+  createAssetUrlTransformWithOptions
+} from '../src/templateTransformAssetUrl'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
 
@@ -46,4 +49,26 @@ describe('compiler sfc: transform asset url', () => {
 
     expect(result.code).toMatchSnapshot()
   })
+
+  test('with explicit base', () => {
+    const ast = baseParse(
+      `<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)
+    )
+    transform(ast, {
+      nodeTransforms: [
+        createAssetUrlTransformWithOptions({
+          base: '/foo'
+        }),
+        transformElement
+      ],
+      directiveTransforms: {
+        bind: transformBind
+      }
+    })
+    const { code } = generate(ast, { mode: 'module' })
+    expect(code).toMatchSnapshot()
+  })
 })