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

fix https://github.com/vitejs/vite/issues/1343
This commit is contained in:
Evan You 2021-01-04 15:09:36 -05:00
parent c92990eff0
commit 2ea9867398
3 changed files with 22 additions and 23 deletions

View File

@ -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 */))
}"
`;

View File

@ -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()
})

View File

@ -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
}