您的位置：首页 > 编程技术 > js  >  关于Vite不能使用require问题的解决方法

关于Vite不能使用require问题的解决方法

 更新时间：2022年10月21日 19:24  点击：767 作者：会说法语的猪

咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换

为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源

vite却不能使用，确实有点点的难受，最近刚发现了一种开发时依赖插件vite-plugin-require-transform，那就试一下吧

vitejs/ awesome-vite - github地址： https://github.com/vitejs/awesome-vite

进去之后咱们搜索 require，然后选择第三个

带你进去之后即 vit-plugin-require-transform

然后安装 

yarn add -D vite-plugin-require-transform
or
npm i vite-plugin-require-transform --save-dev

然后vite.config.js中配置 

import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform';
 
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
  ],
});

这样就可以了 

然后就去抓紧抓紧试一下 

第一： 

<img class="img" :src="require('@/assets/login/login-bg.jpg')" alt="">

这样是可以的，也不会报错了，正常使用require 

第二： 

<img class="img" :src="require(`@/assets/login/login-bg.jpg`)" alt="">

这种就不行！报错，和第一种的区别就是把普通字符串改成了模板字符串（``）反引号，这种是不行的，有点坑 

第三： 

<template>
  <div class="img">
    <img class="img" :src="img1" alt="">
  </div>
</template>
<script setup>
const img1 = require('@/assets/login/login-bg.jpg')
</script>

这种也不行 ！报错！

又是一个坑 

第四： 

<template>
  <div class="img">
    <img class="img" :src="img2" alt="">
  </div>
</template>
<script setup>
const img1 = require('@/assets/login/login-bg.jpg')
let img2 = img1
</script>
<style scoped>
.img {
  width: 100%;
  height: 100%;
}
</style>

这样竟然可以！完全不报错！ 

第五（使用变量）： 

<template>
  <div class="img">
    <img class="img" :src="img2" alt="">
  </div>
</template>
<script setup>
let a = 'login'
const img1 = require('@/assets/' + a +'/login-bg.jpg')
let img2 = img1
</script>
<style scoped>
.img {
  width: 100%;
  height: 100%;
}
</style>

刚才使用``模板字符串的都不行，变量更不用写了，这次换个写法，同样也是不行

唉，有点失望，，，，真不知道出这个插件的意义在哪，这也不实用啊，跟webpack那个require差的有点儿远啊，这个插件就是将代码从 require 语法转换为 import ，但是我发现还不如import好用的，倒不如直接使用import了，都知道存在即合理，哈哈哈哈，就仅仅只为了解决require is not defined而出现吗

还是我太菜了吗。。。但是使用vue-cli3 + vue2的时候确实不存在上面的问题

总结

到此这篇关于Vite不能使用require问题的文章就介绍到这了,更多相关Vite不能使用require内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/m0_51431448/article/details/124398609

[!--infotagslink--]

相关文章

  • 详解Vue3.0 + TypeScript + Vite初体验

    这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22

  • require、backbone等重构手机图片查看器

    这篇文章主要为大家详细介绍了require、backbone等重构手机图片查看器的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-11-22

  • Lua中的loadfile、dofile、require详解

    这篇文章主要介绍了Lua中的loadfile、dofile、require详解,本文分别用实例讲解它的用法和特点等内容,需要的朋友可以参考下...2020-06-30

  • perl文件包含(do,require,use)指令介绍

    Perl中的文件包含，有三种方法：do, require, 以及use，这里简单的介绍下方便需要的朋友...2020-06-29

  • php中set_include_path和require,include介绍

    在php中set_include_path会导致require,include用法不一样了，对于这个问题我们来看一个简单的例子，具体如下。 在PHP中经常使用include，require来引用其他文件，使用相...2016-11-25

  • 通过Include和Require函数实现代码重用

    　　如果你做过各种大小的Web站点，一定会对重用代码段的重要性深有体会，不管是HTML还是PHP代码块。比如需要一年修改一次包含版权信息的页脚，而你有1000个Web页（就算是10...2016-11-25

  • 详解handlebars+require基本使用方法

    本文主要对handlebars+require基本使用方法进行详细介绍，文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧...2017-01-09

  • php中include require utf-8文件时顶部产生空行的

    本文章来介绍关于php中include require utf-8文件时顶部产生空行的解决办法有需要学习的朋友可参考。 include()产生一个警告而require()则导致一个致命错误。换...2016-11-25

  • Vite和Vue CLI的优劣

    这篇文章主要介绍了Vite比Vue CLI快在哪里，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下...2021-01-31

  • 简单谈谈PHP中的include、include_once、require以及require_once语句

    include() 、require()语句包含并运行指定文件。这两结构在包含文件上完全一样，唯一的区别是对于错误的处理。require()语句在遇到包含文件不存在，或是出错的时候，就停止即行，并报错。include()则继续即行。...2016-04-26

  • PHP Include与require

    PHP Include 文件 服务器端包括 您可以插入的内容的文件到PHP文件之前，服务器执行它，与包括（ ）或要求（ ）函数。这两项职能是相同的各种方式，但他们如何处理错误。在包括（ ）函...2016-11-25

  • Perl中use和require用法对比分析

    Perl 中的use和require，都是用来加载和引用Perl的模块，或者是子程序，区别在于Perl use是在当前默认的里面去寻找，一旦模块不在指定的区域内的化，用Perl use是不可以引入的...2020-06-29

  • php include与require用法介绍

    引用文件的方法有两种：require 及 include。两种方式提供不同的使用弹性。 require 的使用方法如 require("MyRequireFile.php"); 。这个函数通常放在 PHP 程序的...2016-11-25

  • php require_once用法与相对目录要谨慎

    文章介绍了大家在 php开发中会常常碰到的一个关于require_once用法，有需要的朋友可参考一下。 wwwroot //网站根目录 绝对路径为: F:/wwwroot -- folder_a // 文...2016-11-25

  • php include 与require 教程

    在php中我们调用外部文件都会用到php include 与require 来包含进来了,但是否include 和require他们两有什么区别呢 服务器端include（小型工业）用于创建功能，页眉，...2016-11-25

  • php中include include_once require require_once性能比较详解

    文章利用图文详细的介绍了在php中关于include与include_once和require与require_once性能图，有需要的朋友可以详细的看看，但总体来讲include_once和require_once性能要...2016-11-25

  • Vite创建项目的实现步骤

    随着 Vite2 的发布并日趋稳定，现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤，感兴趣的可以了解一下...2021-07-12

  • phpmyamdin安装出现Warning: require(./libraries/Error_Handler.class.php) 错误解决办法

    windows2003，在装phpmyadmin的时候居然报错 Warning: require(./libraries/Error_Handler.class.php) [function.require]: 。解决方法如下 在安装phpMyAdmin-4.0....2016-11-25

  • PHP文件包含语句 include、include_once、require、require_onc

    1、include() include(/path/to/filename) include()语句将在其被调用的位置处包含一个文件。包含一个文件与在该语句所在位置复制制定文件的数据具有相同内容的效果...2016-11-25

  • php关于require和include的区别

    include() 或 require() 函数，您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容。除了它们处理错误的方式不同之外，这两个函数在其他方面都是相同的 i...2016-11-25