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;
};
相关文章
|
2月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
104 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
3月前
|
开发框架 小程序
uniApp——Eslint报错'uni' is not defined
uniApp——Eslint报错'uni' is not defined
143 0
|
JavaScript
vue踩坑-This relative module was not found
vue踩坑-This relative module was not found
198 0
|
6月前
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
|
Web App开发 JavaScript
vue踩坑-Error: Can't resolve 'sass-loader' in 'E:\Element-UI-master\src\components'
vue踩坑-Error: Can't resolve 'sass-loader' in 'E:\Element-UI-master\src\components'
134 0
|
JavaScript 前端开发 API
vite.config.js 无法使用__dirname的解决方法
在使用 vite 的时候发现,在其 vite.config 文件中无法使用 __dirname 来代表当前目录,所有经过一番了解之后有了这篇文章。
714 0
|
JavaScript
vite无法使用require,require is not defined
vite无法使用require,require is not defined
540 0
|
JavaScript
vue.js实战案例(3):vue启动项目报错npm ERR! missing script: serve的解决方法
vue.js实战案例(3):vue启动项目报错npm ERR! missing script: serve的解决方法
639 0
|
JavaScript
vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
308 0