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;
};
相关文章
|
3天前
|
JavaScript 前端开发
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or
vitepress初始化安装,最全 “vitepress > @docsearch/js > @docsearch/react > ,ENOENT: no such file or
|
25天前
|
资源调度
蓝易云 - Error: PostCSS plugin autoprefixer requires PostCSS 8问题解决办法
以上步骤应该可以解决"PostCSS plugin autoprefixer requires PostCSS 8"的问题。如果问题仍然存在,你可能需要检查你的项目配置,确保没有其他的冲突或问题。
28 0
|
2月前
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
nrm 安装后报错 Error [ERR_REQUIRE_ESM]: require() of ES Module
174 0
|
8月前
|
JavaScript
vue踩坑-This relative module was not found
vue踩坑-This relative module was not found
113 0
|
11月前
vuepress打包报错 localStorage is not defined
vuepress打包报错 localStorage is not defined
116 2
|
2月前
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
|
8月前
|
JavaScript
vue踩坑记- Cannot find module 'wrappy'
vue踩坑记- Cannot find module 'wrappy'
57 0
|
11月前
|
JavaScript 前端开发 API
vite.config.js 无法使用__dirname的解决方法
在使用 vite 的时候发现,在其 vite.config 文件中无法使用 __dirname 来代表当前目录,所有经过一番了解之后有了这篇文章。
385 0
|
11月前
|
JavaScript
vite无法使用require,require is not defined
vite无法使用require,require is not defined
420 0
dva和Umi中两个小用法
dva和Umi中两个小用法
171 0