vue3+ts+vite 引入静态资源require报错_vue3 require

写登录页面 设置背景图 的时候按照之前思路require(图片路径) 即可，但发现在vue3中报错

error    'require' is not defined                            no-undef
1

发现是 在vite中不能使用require引入图片资源，因为这里的require是webpack提供的一种加载能力，由于我们使用的是Vite，因此这里必须转用 Vite提供的静态资源载入
Vite中静态资源处理

官方例

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

1
2
3

简单的说 new URL 一共接收两个参数，第一个参数即图片的路径，这里就是对应require中的值，第二个参数是vite的一个全局变量，可以理解成直接写死了 import.meta.url

参考链接
https://blog.csdn.net/zy21131437/article/details/125987046

顺便 我们可以对他进行一个封装 省得每次这么一长串；在utils文件夹下require.ts，用来处理图片

/** vite的特殊性, 需要处理图片 */
export const require = (imgPath: string) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    // https://vitejs.cn/guide/assets.html#the-public-directory
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

1
2
3
4
5
6
7
8
9
10
11

使用

import { require } from '@/utils/require';
const bgImgSrc = require('@/assets/img/loginBg.png');
1
2