Vite 踩坑 —— require is not defined

简介: 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;
};
相关文章
|
1月前
|
开发框架 小程序
uniApp——Eslint报错'uni' is not defined
uniApp——Eslint报错'uni' is not defined
47 0
|
2月前
|
JavaScript 前端开发
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or
|
4月前
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
475 0
|
10月前
|
JavaScript
vue踩坑-This relative module was not found
vue踩坑-This relative module was not found
162 0
|
缓存 JavaScript
Vue框架中报 npm ERR code EINTEGRITY
在使用taro 安装依赖包的时候,经常出现npm ERR! code EINTEGRITY的问题,应该是npm本地的缓存造成的。
261 0
Vue框架中报 npm ERR code EINTEGRITY
|
10月前
|
前端开发
React踩坑-安装npm install fetch-jsonp报错
React踩坑-安装npm install fetch-jsonp报错
59 0
|
10月前
|
JavaScript
vue踩坑记- Cannot find module 'wrappy'
vue踩坑记- Cannot find module 'wrappy'
77 0
|
10月前
|
JavaScript
vue踩坑- 报错npm ERR! cb() never called!
vue踩坑- 报错npm ERR! cb() never called!
94 0
|
JavaScript 前端开发 API
vite.config.js 无法使用__dirname的解决方法
在使用 vite 的时候发现,在其 vite.config 文件中无法使用 __dirname 来代表当前目录,所有经过一番了解之后有了这篇文章。
603 0
|
JavaScript
vite无法使用require,require is not defined
vite无法使用require,require is not defined
492 0