vue中兼容webpack和vite的动态引入图片的两种方案

目前项目是使用@vue/cli搭建的，前端时间给项目从@vue/cli 4升级到了@vue/cli 5，最近想着vite听说启动速度挺快的，是不是可以加上vite启动项目，这样就可以开发时用vite，打包用webpack。

但是这样一来，就产生了一个问题，需要同时兼容webpack和vite，期间也是踩了不少坑。

在vite中不能通过require动态引入图片，经过实验，有几种方式可以实现。

这里我想到了用vue指令方式写一个兼容的方法，这种方式是最简单的。

我想到了两种最简单实现的方式：

第一种

export function src(el, binding) {
    if (!process.env.VITE) el.setAttribute('src', require(`@/assets/${binding.value}`))
    else el.setAttribute('src', new URL(`/src/assets/${binding.value}`, import.meta.url).href)
}

在vite.config.js中需要先定义全局变量process.env.VITE为true，这样就可以在项目中直接访问这个变量判断当前是否是vite环境，如果不是vite，那么就是webpack环境中直接通过require获取图片地址并赋值到el的src属性上；如果是vite环境，则可以通过new URL('url', import.meta.url)方式引用了，这里也可以直接换成'../src/assets/${binding.value}'去访问。

第二种

export async function src(el, binding) {
  el.setAttribute('src', (await import(/* @vite-ignore */ `../assets/${binding.value}.png`)).default)
}

这种方式就不需要判断是否是vite环境了，直接通过es6的import拿到图片地址，然后赋值给el的src属性，效果是一样的。但是需要注意的是第一种方式没有限制条件，第二种需要写上import的文件的后缀，否则会有警告，可以添加上/* @vite-ignore */ 来忽略警告。

在main中给vue.directive('src', src)配置上。

最后直接在img标签上使用v-src="`images/{url}`"就可以了。

顺便说下，在vite.config.js里引入@originjs/vite-plugin-commonjs，就可以在js里写require引入图片了。

引入vite-plugin-stylus-alias可以在template中直接用'@/assets/'这种别名方式引入静态图片。

完事儿，继续趟下一个坑。