vite 引入问题require问题解决办法

最新推荐文章于 2024-03-01 17:30:40 发布
最新推荐文章于 2024-03-01 17:30:40 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： 正儿八经 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41191401/article/details/125164712
版权

使用vue发现浏览器报错require未定义问题，找了很多方法，原来vite有自己的引入方式，可以不用require。甚至我觉得更好用。

将引入的内容变成字符串，vite更方便，node我暂时没找到更好的办法。

针对我之前文章下载无网状态下的echart图表，

地址：纯前端Echart+HTML静态网页下载,无网运行_一只成序源的博客-CSDN博客_静态网页下载下载包含Echart的静态HTML代码，在无网环境下使用https://blog.csdn.net/qq_41191401/article/details/120267064

只能自定义个echart字符串，非常的不方便，今天发现vite竟然可以轻松解决，而且不需要echarts的字符串文件了。

import echartStr from './deal-data/echarts.min.js?raw'

通过如此方式直接引入echarts的源文件，即可直接转成字符串拼接至网页中。有不清楚的可以查看上面的文章。

仅限于vite

一只成序源
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite创建的项目不能使用require引入
weixin_46394325的博客
05-24 450
vite构建项目不能用require引入的解决办法
vite中require替代方案
m0_50446264的博客
11-03 6202
方法二：选择安装（不建议用，因为意义不大，因为在vite中不需要添加require，可以直接通过路径引入，比如const img = ‘/images/log.png’;场景：store/index.js中，如果有多个modules，这样一个一个导入确实麻烦。优化：希望不用写那么多的import，modules写一次就可以了。方法一：vite中require替代方案，import方法（推荐）并配置vite.config.js。这样require就可以在vite的项目中正常使用了。项目环境：vite，
解决项目迁移vite引入图片资源报require is not defined的问题
前端咸鱼翻身的博客
03-28 8339
简单介绍了Vite在生产构建时对图片资源的引入方法，并且介绍了Vite插件的基本用法
《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
最新发布
前端技术
03-01 7763
Vite 不支持 require 解决方案（三种情况/require is not defined）
大坑？vite构建的vue项目不能直接使用require？
nuanua的博客
08-04 2801
大坑？vite构建的vue项目不能直接使用require？ vite npm
在vue3+vite中 使用require
weixin_42348009的博客
11-21 2720
【代码】在vue3+vite中 使用require。
解决vue+webpack打包路径的问题
11-27
总的来说，解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。
浅谈vue引入css,less遇到的坑和解决方法
08-28
浅谈vue引入css,less遇到的坑和解决方法 在前端开发中，CSS 预处理器 Less 是一种非常流行的选择，但是在 Vue 项目中引入 Less 时，可能会遇到一些问题。下面我们将讨论在 Vue 项目中引入 CSS 和 Less 的一些坑和...
Vue 中如何正确引入第三方模块的方法步骤
10-17
本篇文章将详细介绍两种在Vue中正确引入第三方模块的方法：配置webpack的ProvidePlugin和将第三方模块包装成Vue插件。 ### 方法一：配置webpack的ProvidePlugin全局引入 **ProvidePlugin** 是webpack的一个插件，...
vite-plugin-yaml
05-17
vite-plugin-yaml ... plugins : [ require ( 'vite-plugin-yaml' ) ] } vite.config.ts const config = { plugins : [ require ( 'vite-plugin-yaml' ) ] } export default config 用法 您现在可以导入YAM
解决vue单页面应用进入页面加载所有 js 的问题
11-19
首先，我们来看标题提到的问题："解决vue单页面应用进入页面加载所有 js 的问题"。通常，开发者会在`index.js`等主入口文件中静态导入所有页面组件，例如： ```javascript import My from '@/pages/my' import Cart...
Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源
热门推荐
Oliver尹的博客
07-28 2万+
Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源
vite 打包正式环境 require is not defined
程序媛的梦工厂
11-13 1480
vite 打包正式环境 require is not defined
vue3+ts+vite 引入静态资源require报错
小菜张的博客
11-28 7657
vue3+ts+vite 引入静态资源require报错
Vite中不能使用require，该怎么动态获取静态图片资源？
m0_51431448的博客
08-19 2063
大家有兴趣可以去看下，主要就是介绍了安装第三方插件可以在项目中使用require和vue3引入图片。这篇主要是跟大家分享下还有其他的方式。
Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王佳斌
12-16 1万+
vue3，vite，报错解决，vue3+vite报错require is not defined，vue3 vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3 vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“require is not defined”问题，vite项目require语法兼容问题解决 require is not define
在Vite中使用require引入资源
weixin_59685936的博客
09-18 954
在Vite中使用require引入资源
Vue3 +Vite使用require报错
qq_44741577的博客
02-04 861
原本我们在Vue2时代，可以使用require导入静态资源，如下所示但在Vue3中的Vite没有require方法定义的使用，说白了就是不使用require方法进行资源的导入，而是使用新的方法。详情请看官网。
使用vite如何使用require
06-01
Vite 是一个基于 ES Modules 的构建工具，不支持 CommonJS 的 require 方法，但是可以使用 import 方法来替代 require。 如果你需要在 Vite 项目中使用 CommonJS 的 require 方法，可以使用 @rollup/plugin-commonjs 插件将 CommonJS 模块转换为 ES 模块，然后再使用 import 方法进行引入。 以下是一个使用 @rollup/plugin-commonjs 插件的示例代码： 1. 首先安装 @rollup/plugin-commonjs 插件： ``` npm install --save-dev @rollup/plugin-commonjs ``` 2. 在 vite.config.js 中添加以下配置： ``` import commonjs from '@rollup/plugin-commonjs'; export default { plugins: [ commonjs() ] } ``` 3. 在项目中使用 require 方法： ``` const module = require('./module.js'); ``` 注意：当使用 @rollup/plugin-commonjs 插件时，插件只会将导入的 CommonJS 模块转换为 ES 模块，而不会将模块中使用的 require 方法转换为 import 方法。因此，如果模块中使用了 require 方法，需要将其手动替换为 import 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值