vite vue3 ts import.meta在vscode中报错

已于 2023-01-19 17:40:00 修改
阅读量6.9k 收藏 4
点赞数 3
文章标签： vscode ide javascript vue typescript Powered by 金山文档
于 2023-01-19 17:38:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w13664606186/article/details/128736588
版权

问题描述：开发使用的框架为vite+vue3+ts，在开发过程中莫名其妙报仅当“--module”选项为“es2020”、“esnext”或“系统”时才允许使用“import.meta”元属性

问题解决：

通过更改tsconfig.json的module为esnext，es2022等，未解决该问题；

通过根据vite文档，在 src 目录下创建一个 env.d.ts 文件，未解决该问题；

解决方法

后搜索到vscode中有个issue，为vscode的问题，关闭项目，重启vscode，就不报错了。。。

https://github.com/microsoft/vscode/issues/117111

PennyWang~
关注
vue3+vite - 报错 import.meta.glob() can only accept string literals.（详细解决方案）
高级前端工程师
03-25 2877
vue3，vite，vite+vue3报错，vue3 vite报错，[plugin:vite:import-analysis] import.meta.glob() can only accept string literals.详细解决报错，vue3报错怎么办，vite报错解决方法，vue+vite爆红，浏览器控制台报错，详细教程，vite官方文档，vue如何解决报错，vite使用变量import，vite vue3项目出现错误，在vue3+vite项目中，解决报错： [plugin:vite:impor
js: vite/vue使用import.meta.glob异步导入模块
彭世瑜的博客
06-01 1204
异步导入同步导入。
Vite配置环境变量import.meta.env时出现ts错误
laf211的博客
07-02 853
使用 Vite 2.x 构建项目时，在。将我解决过的bug方法给大家分享下。文件中创建了自定义环境变量。
Vue3+vite中使用import.meta.glob
最新发布
m0_70547044的博客
09-06 683
/ 数组写法同时获取指定文件夹下面的所有文件。我们已经知道 "*"是代表所有文件 "**"是代表所有文件夹 它们是指目录下的所有而并不是单个文件或文件夹 当我们指定某一个目录那么他就是获取指定目录下的所有文件。
import.meta.env报错：Property ‘env‘ does not exist on type ‘ImportMeta‘
weixin_49267032的博客
03-11 2264
import.meta.env报错：Property 'env' does not exist on type 'ImportMeta'
vue3使用import.meta.url打包后运行报错
yang25_的博客
08-22 3319
assets/img.png图片路径是当前项目目录及图片名称，vite会转换，不用考虑打包后目录。报错原因：import.meta.url未被vite解析替换。
基于vite搭建vue3框架的笔记记录(2)--vscode报错
weixin_42067964的博客
01-12 436
项目使用的是vite2来搭建。 ref等报错 yarn add eslint@7.32.0 yarn add eslint-plugin-vue@8.0.0 参考链接：https://blog.csdn.net/zhanye88/article/details/121644706 https://blog.csdn.net/qq_43869822/article/details/121637066 https://blog.csdn.net/sirodeng/article/details/1054
vue2项目 运行 import.meta 报错
weixin_45162984的博客
07-19 759
void 0 : _import$meta.url)这一句代码中，是因为使用了 import。低版本的node环境不支持。在vue2老项目中，运行时报错，错误定位在 defined((_import。在vue.config.js中添加配置。
vite vue3 import.meta.glob动态路由
03-29
在Vite与Vue 3的结合中，`import.meta.glob`是一个强大的特性，可以让我们动态地加载和注册路由模块，使得路由配置更加灵活和可扩展。 首先，我们来了解`import.meta.glob`。这是Vite提供的一种元数据API，它可以...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
2. **导入并处理结果**：在你的 Vue3 应用中，可以使用 `import.meta.glob` 获取到一个 Promise，该 Promise 在所有文件导入完成后解析为一个对象，键是文件的相对路径，值是对应的模块导出。例如： ```javascript ...
vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
m0_67402731的博客
03-01 3094
vite glob-import 官方文档 1.引入库 以 Vuex4+ 批量导入store模块为例 假设有如下目录结构 代码： import { createStore } from 'vuex' 导入模块 const files = import.meta.glob('./module/*.js') 或者 const files = import.meta.globEager('./module/*.js') 注意，路径需为以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析 impo
使用 import.meta.glob 后引起的一系列问题（vue3 + vite）
weixin_46764519的博客
07-09 2628
import.meta 是 ES2020新增的内容，但是 .glob 是 vite 才有的，所以在声明了使用 es2020 后还需要添加 “types”: [“vite/client”] 来添加对应的代码环境，让它编译的时候认识 vite 中才有的属性。
The ‘import.meta‘ meta-property is only allowed when the ‘--module‘ option is ‘esnext‘ or ‘system‘
qq_35119405的博客
06-12 3957
看报错最后的标注，是安装的vetur提示的该问题，代码什么的都是没有问题的，项目也是可以正常打印我的变量allImages，把它diable掉就不会提示了。用npm init vue@latest创建的项目，自动配置了option为esnext。报提示，需要配置--module option为exnext。这个锅还是vetur本身的问题，并不影响使用，只是观感很差。使用vite的import.meta，
vue3+ts如何全局使用import.meta
Tony_StarkM的博客
05-10 450
中添加以下代码，可以在在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的。文件名必须是这样定义，否则读取不到。其中写node环境变量和其它变量。注入的环境变量的类型定义。
Vue3中vite动态import引入打包报错解决
热门推荐
weixin_53035812的博客
08-11 1万+
import { RouteRecordRaw, createRouter, createWebHistory, useRoute, } from "vue-router" // @ts-ignore import util from "/@libs/util" // import Layout from '/@views/layout/Layout.vue' // @ts-ignore import store from "/@store/index" import Layout fro.
vue3 在vite.config中无法使用import.meta.env.*的解决办法
大赚万万亿
12-20 2756
第一种,优先使用第一种方法,其中参数mode就是自定义--mode的值,如果没写,就是production或development。
仅当 “--module“ 选项为 “es2020“、“esnext“ 或 “system“ 时，才允许使用 “import. meta“ 元属性。ts(1343）
weixin_51614564的博客
03-11 1072
3. 修改 "module" 选项，将其值设置为 "es2020"、"esnext" 或 "system" 中的一个。例如，如果你想使用最新的 JavaScript 功能，可以设置为 "esnext"。仅当 "--module" 选项为 "es2020"、"esnext" 或 "system" 时，才允许使用 "import.meta" 元属性。的模块系统之一，即 "es2020"、"esnext" 或 "system"。2. 找到 "compilerOptions" 部分。
仅当 “--module” 选项为 “es2020”、“es2022”、“esnext”、“system”、“node16” 或 “nodenext” 时，才允许使用 “import.meta” 元属
m0_63552705的博客
08-17 5092
仅当 “--module” 选项为 “es2020”、“es2022”、“esnext”、“system”、“node16” 或 “nodenext” 时，才允许使用 “import.meta” 元属
Cannot use ‘import.meta‘ outside a module Vant按需引入报错
苦夏木禾
08-09 3958
Cannot use 'import.meta' outside a module Vant按需引入报错
在vite.config.ts中无法引用import.meta.env
06-08
如果在 `vite.config.ts` 中无法引用 `import.meta.env`，可能是因为 `vite.config.ts` 是在 Node.js 环境下运行的，而 `import.meta.env` 是在浏览器环境下才有的。因此，在 `vite.config.ts` 中无法直接使用 `import.meta.env`。 如果你需要在 `vite.config.ts` 中使用环境变量，可以通过以下方式来实现： 1. 使用 `process.env` 访问环境变量。 在 `vite.config.ts` 中，你可以通过 `process.env` 来访问环境变量。例如，假设你在 `.env` 文件中定义了一个环境变量 `VITE_MY_VARIABLE`，你可以在 `vite.config.ts` 中使用 `process.env.VITE_MY_VARIABLE` 来访问它。 ```typescript export default defineConfig({ plugins: [ { name: 'my-plugin', config: () => { console.log(process.env.VITE_MY_VARIABLE) // 访问环境变量VITE_MY_VARIABLE } } ] }) ``` 2. 使用 `dotenv` 模块加载环境变量。 如果你希望在 `vite.config.ts` 中使用 `.env` 文件中定义的环境变量，可以使用 `dotenv` 模块来加载它们。首先，你需要安装 `dotenv` 模块： ```shell npm install dotenv --save-dev ``` 然后，在 `vite.config.ts` 中加载 `.env` 文件： ```typescript import dotenv from 'dotenv' dotenv.config() export default defineConfig({ plugins: [ { name: 'my-plugin', config: () => { console.log(process.env.VITE_MY_VARIABLE) // 访问环境变量VITE_MY_VARIABLE } } ] }) ``` 这样，你就可以在 `vite.config.ts` 中访问 `.env` 文件中定义的环境变量了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值