Skip to content
This repository has been archived by the owner on Feb 17, 2023. It is now read-only.

fix: add the support of the asset url without protocol header #118

Closed
wants to merge 2 commits into from

Conversation

screetBloom
Copy link

@screetBloom screetBloom commented Aug 7, 2021

Background

vite-plugin-vue2@1.7.3 will cause an absolute asset reference without protocol header in the template to report an error:

image

image



Minirepo

Can run yarn dev in vite-plugin-vue2/playground


I've provided a separate comparison of the default vite project and the vite-plugin-vue2 project

我另外提供了一个 vite 默认创建项目和 vite-plugin-vue2 的对比。当前的 vite-plugin-vue2 实现方式会导致没有协议头的图片路径请求出现问题:
src: //cli.vuejs.org/favicon.png => src: require('xxx') => import _$require_xxx ; src: _$require_xxx

https://github.com/screetBloom/vite-mini-repo/tree/main/packages
image


image
image



Tests

image

@IndexXuan
Copy link
Contributor

IndexXuan commented Aug 8, 2021

https://github.com/underfin/vite-plugin-vue2/blob/master/src/template/utils.ts#L54

也遇到了这个问题,希望可以解决,影响很大。
但我认为应该扩展这里而非新增 noProtocol util,这里连 http 字符也是可选即可支持 ://。
cc @screetBloom @underfin

@screetBloom
Copy link
Author

screetBloom commented Aug 8, 2021

这里我解释一下为什么选择了在 urlToRequire 中增加判断逻辑而不是改 isExternalUrl


我对比了 vite-plugin-vue2vue-next 的源代码

  1. isExternalUrl 的实现是vite-plugin-vue2vue-next源码保持一致的一个写法
  2. 从文件作用上来讲,vite-plugin-vue2/src/template/utils.tsvue-next/packages/compiler-sfc/src/templateUtils.ts 文件是有点都期望长期作为细粒度的、干净工具函数文件
  3. 增加的 noProtocolImgUrlRe 只是针对 vue2 中未写协议头的图片类型,不会导致 externalRE 范围扩大;后续如果在模板解析时对静态资源的 requiretoimport 进行了请求提升的优化,noProtocolImgUrlRe是可以快速删掉的,不会污染 externalRE

https://github.com/vuejs/vue-next/blob/4781965cc2396b51028a05917a3b057f884bc0b7/packages/compiler-sfc/src/templateUtils.ts#L9-L12


综合考虑

  1. 猜测 utils.ts 这个文件后续会同步 compiler-sfc/src/templateUtils.ts 这个包的内容,直接修改整个正则不利于后续同步
  2. vite-plugin-vue2urlToRequire 分支语句中增加判断是一个更具拓展且影响较小的做法


@underfin underfin closed this in cd171ec Aug 9, 2021
@screetBloom
Copy link
Author

screetBloom commented Aug 10, 2021

@underfin

Can u explain why vue3 has no problem in this case with the same externalRE , plz 🙏

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants