underfin / vite-plugin-vue2

Vue2 plugin for Vite
621 stars 84 forks source link

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

Closed screetBloom closed 3 years ago

screetBloom commented 3 years ago

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 commented 3 years ago

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

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

screetBloom commented 3 years ago

这里我解释一下为什么选择了在 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 分支语句中增加判断是一个更具拓展且影响较小的做法



screetBloom commented 3 years ago

@underfin

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