您现在的位置是:网站首页> 编程资料编程资料
关于Vite不能使用require问题的解决方法_vue.js_
2023-05-24
303人已围观
简介 关于Vite不能使用require问题的解决方法_vue.js_
咱们在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$/ }), ], });这样就可以了
然后就去抓紧抓紧试一下
第一:
这样是可以的,也不会报错了,正常使用require
第二:
这种就不行!报错,和第一种的区别就是把普通字符串改成了模板字符串(``)反引号,这种是不行的,有点坑
第三:
这种也不行 !报错!

又是一个坑
第四:
这样竟然可以!完全不报错!
第五(使用变量):
刚才使用``模板字符串的都不行,变量更不用写了,这次换个写法,同样也是不行
唉,有点失望,,,,真不知道出这个插件的意义在哪,这也不实用啊,跟webpack那个require差的有点儿远啊,这个插件就是将代码从 require 语法转换为 import ,但是我发现还不如import好用的,倒不如直接使用import了,都知道存在即合理,哈哈哈哈,就仅仅只为了解决require is not defined而出现吗
还是我太菜了吗。。。但是使用vue-cli3 + vue2的时候确实不存在上面的问题
总结
到此这篇关于Vite不能使用require问题的文章就介绍到这了,更多相关Vite不能使用require内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- Vue electron零基础使用教程_vue.js_
- vue el-switch初始值(默认值)不能正确显示状态问题及解决_vue.js_
- vue项目如何实现ip和localhost同时访问_vue.js_
- Vue自定义Form组件实现方法介绍_vue.js_
- vue项目的访问端口及其设置方式_vue.js_
- Vue项目设置可以局域网访问_vue.js_
- JavaScript数组实现扁平化四种方法详解_javascript技巧_
- TypeScript接口与泛型全面精讲_javascript技巧_
- 如何让别人访问本地运行的vue项目_vue.js_
- JavaScript自定义Promise实现流程_javascript技巧_
