vue3使用import.meta.url打包后运行报错

yang25_

已于 2023-08-22 16:46:21 修改

阅读量2.8k

点赞数 3

分类专栏： vite 文章标签： javascript 前端开发语言

于 2023-08-22 16:40:24 首次发布

本文链接：https://blog.csdn.net/yang25_/article/details/132429353

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

new URL(…/assets/img.png, import.meta.url).href

报错信息：
在这里插入图片描述
报错原因：import.meta.url未被vite解析替换

寻找报错原因：
1、let importMetaUrlRE = /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|[^`]+`)\s*,\simport.meta.url\s)/g;`

  new URL(`../assets/img.png`, import.meta.url).href  toString字符串要匹配以上正则表达式，见vite源码        /vite/dist/node/chunks\dep-972722fa.js的assetImportMetaUrlPlugin函数

2、…/assets/img.png图片路径是当前项目目录及图片名称，vite会转换，不用考虑打包后目录

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yang25_

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3使用import.meta.url打包后运行报错

assets/img.png图片路径是当前项目目录及图片名称，vite会转换，不用考虑打包后目录。报错原因：import.meta.url未被vite解析替换。
复制链接

扫一扫

专栏目录

从 vue-cli 源码中，我发现了27行读取 json 文件有趣的 npm 包

u012384510的博客

12-06

1064

1. 前言大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。已进行四个月了，很多小伙伴表示收获颇丰。...

vite5+vue3+ import.meta.glob动态导入vue组件

03-25

2. **导入并处理结果**：在你的 Vue3 应用中，可以使用 `import.meta.glob` 获取到一个 Promise，该 Promise 在所有文件导入完成后解析为一个对象，键是文件的相对路径，值是对应的模块导出。例如： ```javascript ...

参与评论您还未登录，请先登录后发表或查看评论

vue3+vite 动态引入图片的几种方式

qq_43372535的博客

10-18

2481

vue3+vite 动态引入图片的几种方式

每日一题（五零）import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的URL。

MFWSCQ的博客

06-09

2598

一句话补全代码，获取它的完整位置：http://xx.com/dist/scripts/xx.js const url = //这里补全 export default url; 说明：该文件名未知，位于当前项目内的 dist/scripts 文件夹内注：非 Node 环境 node 可以用 __dirname ...

vue3代码解读：alias: { ‘@‘: fileURLToPath(new URL(‘./src‘, import.meta.url)) }解释这段代码

weixin_48420104的博客

06-04

764

这段代码是配置别名(alias)的一个例子，通常用于JavaScript模块打包工具或构建工具中，比如Webpack。别名允许你在模块路径中使用简短的别名而不是完整的路径。使用别名后，你可以在项目中的任何地方通过。来代替冗长的相对路径或绝对路径，使得路径更简洁，也方便维护。目录的完整文件系统路径。这样，开发者在引用模块时可以使用。综合来看，这段代码的作用是设置一个别名。时，它会被替换为当前模块目录下的。例如，如果当前模块的路径是。，而不需要写完整的路径。，当在模块路径中使用。

小白学webgl合集-import.meta.url 和 new URL() bug

热门推荐

weixin_44717047的博客

08-21

3万+

Vue 3使用vite 2.0 动态引入图片 :src

Vite静态资源处理——动态引入图片

z止于至善的博客

03-16

3527

URL导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

vite vue3 import.meta.glob动态路由

03-29

以下是一个基本的示例，展示了如何在Vue 3应用中使用`import.meta.glob`来设置动态路由： ```javascript // src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import App from '....

babel-plugin-bundled-import-meta:Babel插件重写import.meta以用于捆绑使用

05-01

Babel插件可重写import.meta.url以供捆绑使用。安装babel-plugin-bundled-import-meta 此模块需要node.js 10或更高版本以及@babel/core 。 npm i babel-plugin-bundled-import-meta 用法将babel-plugin-bundled...

Vue路由对象属性 .meta $route.matched详解

10-16

Vue.js的路由管理是通过Vue Router库实现的，它提供了丰富的功能来帮助构建单页应用。在Vue Router中，路由对象 `$route` 是一个非常重要的概念，它包含了当前激活的路由的所有信息。本文将深入探讨`.meta`和`$route...

巧用 import.meta 实现热更新

李刚的学习专栏

04-15

6270

Pinia 是 vuex 新替代方案。Pinia 中热更新实现，借助 import.meta。

解决webpack中报错的问题

Demolist的博客

04-26

1536

webpack中配置报错问题

vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式

我总是词不达意的博客

07-20

3万+

vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式

vue3中动态引入静态资源

wsj1156912876的博客

04-15

1313

vite：在vue3中动态引入静态资源图片需要使用 new URL(url, import.meta.url)方法。注意：如果作为背景图片，要使用相对路径，不然打包时无法解析。webpack：通过require动态引入。将图片作为背景图片使用。

uniapp vue3 配置文件import.meta.env.BASE_URL

01-18

在uniapp中，可以使用`import.meta.env.BASE_URL`来获取当前项目的基本URL。这个值通常用于在请求API时构建完整的URL路径。然而，在使用vue3时，可能会遇到`Property ‘env‘ does not exist on type ‘ImportMeta‘`的错误。为了解决这个问题，你可以在tsconfig.json文件中添加以下配置： ```json { "compilerOptions": { "types": ["vite/client"] } } ``` 这样做可以为`import.meta.env`提供类型定义，以便在vue3中正确使用`import.meta.env.BASE_URL`。