首页 > 其他分享 >Vite+vue3发布后使用的静态图片无法显示Failed to construct ‘URL‘: Invalid URL

Vite+vue3发布后使用的静态图片无法显示Failed to construct ‘URL‘: Invalid URL

时间:2022-08-27 17:56:30浏览次数:82  
标签:vue URL es2020 Invalid Failed construct vue3

1.使用官方引用静态资源处理,需要把图片放在public里面

getImageUrl(name) {
  return new URL(`./img/${name}.png`, import.meta.url).href
}

 

2.本地运行项目中可以显示图片,但是发布后报Failed to construct ‘URL’: Invalid URL错误,是因为把 esbuild 构建目标设置为 es2020 或更高版本

import vue from "@vitejs/plugin-vue";

export default {
  base: "/",
  plugins: [vue()],
  optimizeDeps: {
    include: ["schart.js"],
  },
  build: {
    target: "es2020",
  },
  optimizedeps: {
    esbuildoptions: {
      target: "es2020",
    },
  },
};

 

标签:vue,URL,es2020,Invalid,Failed,construct,vue3
From: https://www.cnblogs.com/angel648/p/16631049.html

相关文章

  • Vite + Vue3 + Pinia + es6 + TypeScript 搭建项目
    vite中文参考文档:https://vitejs.cn/guide/#scaffolding-your-first-vite-project执行 npminitvite@latest步骤如下图:下载依赖npmi 启动项目:npmrundev ......
  • vue3 基础-常用模板语法
    一个vue的单文件SAP(singlepagewebapplication)即在一个.vue为后缀的文件中,会包含3个部分.模板:html逻辑:javascript样式:css这种同时存在,然......
  • vue3使用wangeditor富文本编辑器
     npm下载 1npmiwangeditor-S       在要使用的页面导入1importEWangEditorfrom"wangeditor";2import{onMounted,reactive}from"vue";......
  • curl
    CurlorCURLmayreferto:ScienceandtechnologyCurl(mathematics),avectoroperatorthatshowsavectorfield'srateofrotationCurl(programminglanguag......
  • 教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式
    目录1.你应该先知道的基础知识1.1.CesiumJS的库构成1.2.选择Vite3和pnpm的理由1.3.使用External模式引入静态库-不打包静态库1.4.切勿什么都import-以及......
  • VSCode添加自定义的Vue3.2标准模板
    创建新的用户片段 点击文件——首选项——用户片段或者用快捷Ctrl+Shift+P唤出控制台然后输入“snippets”并选择接着输入vuevscode自动生成vue.json文件{......
  • url not set
    UrInotset原因与处理方法今天下午跑代码时发现,上午能跑的代码下午跑不了了。一直报Urlnotset错误。出现这个问题的主要原因,是因为代码中的@ConfigurationProperti......
  • 使用vue3对数据进行分页展示
    要获取用户的滚动位置,可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部,则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。getBoundi......
  • vue3 onMounted is called when there is no active component
    Vue版本:3.0.0出现的问题:在setup()中onMounted()onActivated(),出现警告:[Vuewarn]:onMountediscalledwhenthereisnoactivecomponentinstancetobeassoc......
  • CentOS8错误:为仓库 'appstream' 下载元数据失败 : Cannot prepare internal mirrorlis
    CentOSLinux8在2022年12月31日来到生命周期终点(EndofLife,EoL)。即CentOSLinux8操作系统版本结束了生命周期(EOL),Linux社区已不再维护该操作系统版本。所以原来的CentOS......