vite打包报错[rollup-plugin-dynamic-import-variables] Unexpected token ，竟然是因为console.log

最新推荐文章于 2024-05-29 09:03:33 发布
最新推荐文章于 2024-05-29 09:03:33 发布
阅读量4.9k 收藏 1
点赞数 3
分类专栏： vite 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43020925/article/details/125274764
版权

整一个大无语，本地跑的好好的，结果打包死活一直报错
在这里插入图片描述
这报错代码定位只能定位到该文件中,行数是不准的,这定位是假的吧，到后来发现原来是console的锅，都知道vite获取环境变量是通过import.meta.env.xxx的方式,但是import.meta.env不能以字符串的形式出现在console.log里面

// 这样写打包会报错
console.log('import.meta.env.VITE_APP_BASE_API',import.meta.env.VITE_APP_BASE_API)

// 这样写就不会报错
console.log('VITE_APP_BASE_API',import.meta.env.VITE_APP_BASE_API)
weixin_43020925
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
rollup-plugin-copy:使用汇总复制文件和文件夹
05-10
import copy from 'rollup-plugin-copy' export default { input : 'src/index.js' , output : { file : 'dist/app.js' , format : 'cjs' } , plugins : [ copy ( { targets : [ { src : 'src/index.html' ...
rollup-plugin-eslint:使用ESLint整理汇总套件。 :honeybee:
05-13
import eslint from '@rbnlffl/rollup-plugin-eslint' ; export default { // .. plugins : [ eslint ( ) // .. ] } ; 设定档 默认情况下，此插件尊重您的ESLint配置。 它也需要用于所涉及的配置对象ESLint...
vite 结合vue3.0 打包报错
qq_24343389的博客
09-09 1322
【代码】vite 结合vue3.0 打包报错。
vite构建build选项配置（2024-05-29）
最新发布
hap1994的博客
05-29 1614
可以返回一个新的依赖关系数组，可能被过滤后变少了，也可能有更多依赖注入进来了，同时它们的路径也被修改过。将静态资源在构建后合并是框架的责任。最直观的示例是当你要兼容的场景是安卓微信中的 webview 时，它支持大多数现代的 JavaScript 功能，但并不支持。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时一并获取。此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target，此处的 target 并非是用于 JavaScript 转写目标。
Vite 打包报错 [rollup-plugin-dynamic-import-variables] Unexpected character ‘‘
love_Lie的博客
05-27 3503
Vite 打包加载 .mov 文件报错 [rollup-plugin-dynamic-import-variables] Unexpected character ''
VUE3+vite项目中动态引入组件和异步组件
热门推荐
球球不吃虾WHR2349博客
07-28 1万+
VUE3+vite项目中动态引入组件和异步组件
动态引入DynamicImport实现原理
weixin_42776027的博客
01-13 2504
本文介绍的动态引入实现方式基于 rollup 插件通常情况下，我们都是通过确定的字面量路径来引用文件模块的，例如：123import'./a.js';require('./a.js'import('./a.js'对于确定的文件路径来说，构建工具可以轻易的抓取文件并进行相关的转换。但当import或者require的目标不是一个静态字符串，而是一个动态表达式时，构建工具其实也不确定用户到底引用了什么，所以通常这种情况只能依靠 JavaScript 的运行时来解析。
【VitePress】项目打包异常问题总结（Could not resolve、Unexpected character ‘‘、Invalid value used as weak map key）
一个努力学习的程序猿
12-07 3012
在最近的一次 VitePress 文档中心 开发过后，在打包时发生了三次报错，而每个报错通过查阅资料都能找到相关解决方案，现将遇到的问题汇总总结如下。如果大家也有相同的问题，希望能帮助到各位。本文无任何其他用途，仅用作作者自己总结。
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
10-17
主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vite-plugin-mpa:MPA（多页应用程序）
04-08
Vite-plugin-mpa 开箱即用的多页面应用程序，用于Vite，支持Vue2 / 3，React等动机访问本机支持多页，但必须配置rollupOptions.input 在访问开发人员时，必须为$projectRoot/src/pages/index/xxx.html打开localhost:...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
vite vue3 src import 动态导入失败解决方法
fdsjiaoDoctor的博客
10-18 6159
1.使用import.meta.globEager() const getSrc = (name) => { const path = `/static/icon/${name}.svg`; const modules = import.meta.globEager("/static/icon/*.svg"); return modules[path].default; }; 2.在computed属性中使用动态路径 var imagePath = .
rollup 打包build报错:[!] Error: Unexpected character ‘@‘ (Note that you need plugins to import files th
q7410p123的博客
09-02 5701
[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) styles\index.scss (1:0) 1: @import './variable.scss'; 解决方案: PostCSS({ minimize: true, modules: { generateScopedName: ...
rollup 打包报错 Error: Unexpected character ‘‘
gujian_peachblossom的博客
03-03 2726
rollup/gulp 打包报错
vite 环境变量导致接口携带本地ip地址
x476769784的博客
09-23 1054
学习vite+tsx
记：vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】
qq_23404533的博客
12-07 5156
env.development、.env.production中的常量命名须以"VITE_"开头，这里定义的常量为VITE_APP_PROXY_BASE_API，值分别为"/proxyCustomerApi-dev"、"/proxyCustomerApi-pro"用以区分开发环境和生产环境，值可自定义为"/+自己想定义的内容"接下来处理生产环境（线上模式）下的跨域报错问题，由于刚刚前端的配置中已经加上了对生产环境的代理配置，其实也就是根目录下的这个文件【.env.production】。
rollup.js打包vue组件[!] (plugin commonjs) SyntaxError: Unexpected token (2:2)
kalrase的博客
11-26 5541
rollup.js 打包错误安装插件及依赖 安装插件及依赖 1.rollup-plugin-vue 2.@vue/compiler-sfc 3.rollup-plugin-postcss 4.npm i -D sass #rollup.config.dev.js 配置 const vue = require('rollup-plugin-vue'); const postcss=require('rollup-plugin-postcss')； module.exports={ input:inpu
vite添加环境变量import.meta.env
qq_43592064的博客
04-25 7078
在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。 Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~ 我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。 package.json里面的scripts修改，增加多个环境模式，如： "scripts": { "dev": "vite
vite 中使用 rollup-plugin-commonjs
03-07
在Vite中使用`rollup-plugin-commonjs`插件可以帮助我们处理CommonJS模块的导入和使用。下面是使用`rollup-plugin-commonjs`的步骤： 1. 首先，确保你已经在项目中安装了Vite和`rollup-plugin-commonjs`插件。可以使用以下命令进行安装： ``` npm install vite rollup-plugin-commonjs --save-dev ``` 2. 在Vite项目的根目录下创建一个`vite.config.js`文件，并在其中配置`rollup-plugin-commonjs`插件。示例配置如下： ```javascript import commonjs from '@rollup/plugin-commonjs'; export default { plugins: [ commonjs() ] } ``` 3. 保存并关闭`vite.config.js`文件。 现在，当你在Vite项目中导入和使用CommonJS模块时，`rollup-plugin-commonjs`插件会自动将其转换为ES模块，以便在浏览器中正确加载和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值