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

yang25_

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

阅读量2.7k

点赞数 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解析替换。
复制链接

扫一扫

专栏目录

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

03-25

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

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 '....

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

vue 图片引入方式

Binglianxiaojiao的博客

04-23

210

对于脚手架的不同，对应的引入方式也会有所不同一、webpack脚手架。

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

最新发布

weixin_48420104的博客

06-04

648

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

vue3+js+vite学习之静态资源引入（包括动态图片）

u014015203的博客

09-14

1234

因为vite不支持require的写法，所以在vite中使用的方法获取图片url。

JavaScript权威指南第10章模块

weixin_45970219的博客

11-09

885

第10章模块模块化编程的目标是能够用不同作者和来源的代码模块组装成大型程序，即使不同模块的作者无法预知如何使用，代码仍然可以正确运行。实践中，模块化的作用主要体现在封装和隐藏私有处理细节，以及保证在全局命名空间清洁上，因而模块之间不会意外修改各自定义的变量、函数和类。直到几年前，JavaScript还没有内置对模块的支持。大型项目的程序员想方设法地利用类、对象和闭包的弱模块化能力。由于打包工具的支持，基于闭包的模块化在实践中称为常用模块化形式，核心是沿用了Node的require()函数。基于requ

Vue3+Vant3通过mock引入本地图片路径

NanChen的博客

08-16

3628

组件中通过new Url('路径/${图片}',import.meta.url).href。在接口中只需要写入图片名称，通过函数的形式拼接字符串，vite中有专门的写法。

import.meta.env.BASE_URL,报错：Property ‘env‘ does not exist on type ‘ImportMeta‘.

qq_36825145的博客

09-12

1679

注入的环境变量的类型定义。

vite vue3 ts import.meta在vscode中报错

w13664606186的博客

01-19

6321

问题解决：仅当“--module”选项为“es2020”、“esnext”或“系统”时才允许使用“import.meta”元属性

【vue3】-解决build打包之后，无法获取import.meta.env环境变量的问题

string佳佳的博客

01-12

1793

vite-vue3-项目通过-importmetaenv-获取自定义的变量

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

MFWSCQ的博客

06-09

2589

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

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详解

12-13

3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { ...

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

qq_43372535的博客

10-18

2445

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

Vue连续点击同一个URL报错 Uncaught (in promise)

不甜

05-09

469

学做Vue项目，发现在连续点击同一个tabBarItem即点击同一个Url的链接后，会出现报错在点击同一个URL的时候，会报错 Uncaught (in promise，截图如下：解决方案：在项目目录下运行 npm i vue-router@3.0 -S 即可。 ...

vue3引入图片无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

weixin_42216520的博客

04-23

1435

vue3引入图片无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

vue3+vite项目，打包后，图片失效的问题

insist_life的博客

08-02

7366

第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！

解决动态引入图片打包后无法显示的问题

qq_52222760的博客

06-19

644

图片动态绑定。开发时可以正常显示，打包后无法显示。

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`。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交