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;
};
相关文章
|
4月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
311 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
5月前
|
开发框架 小程序
uniApp——Eslint报错'uni' is not defined
uniApp——Eslint报错'uni' is not defined
268 0
|
6月前
|
JavaScript Java 关系型数据库
青戈大佬部署SpringBoot+Vue项目资料,vue中配置文件 .env.development,在Vue目录下 Find in Files
青戈大佬部署SpringBoot+Vue项目资料,vue中配置文件 .env.development,在Vue目录下 Find in Files
vuepress打包报错 localStorage is not defined
vuepress打包报错 localStorage is not defined
214 2
|
JavaScript
vue踩坑记- Cannot find module 'wrappy'
vue踩坑记- Cannot find module 'wrappy'
112 0
|
JavaScript 前端开发 API
vite.config.js 无法使用__dirname的解决方法
在使用 vite 的时候发现,在其 vite.config 文件中无法使用 __dirname 来代表当前目录,所有经过一番了解之后有了这篇文章。
849 0
|
JavaScript
vite无法使用require,require is not defined
vite无法使用require,require is not defined
578 0
|
JavaScript
vue.js实战案例(3):vue启动项目报错npm ERR! missing script: serve的解决方法
vue.js实战案例(3):vue启动项目报错npm ERR! missing script: serve的解决方法
702 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
391 0
|
JSON 缓存 Rust
前端工资涨不上去?可能是你没掌握构建工具:关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
前端工程化,是每一个高级前端开发人员都必须要去深入了解的内容,这也是想要拿到高薪不可避免的一个关键因素。
709 1