Vite 踩坑 —— require is not defined

使用 require 对资源进行引用

< img :src="require('../../assets/login-ikon.png')" alt="插画" />

结果出现了如下的错误

初步判断这是因为 require 是属于 Webpack 的方法，而我使用的是 Vite，所以我们需要去寻找 Vite 静态资源处理的方法，方法如下。

所以，我们只需要将代码改写以下形式即可。 ​

template

<img :src="getImageUrl('../../assets/login-ikon.png')" alt="插画" />

script

const getImageUrl = name => {
    return new URL(name, import.meta.url).href;
};