vue3 项目部署完成后静态文件 404 找不到

更新: 9/11/2025字数: 0 字 时长: 0 分钟

1、问题描述

vue3 项目部署完成后静态文件 404 找不到，导致页面上的一些图片无法正常显示。

2、错误的使用方式

const imgList = [
  {
    title: "中文语音语义专家",
    banner: "/src/assets/images/home/1.png", // [!code warning] // 错误的使用方式
    bgcolor: "#2840a5"
  },
  {
    title: "全语言的语感训练模型",
    banner: "/src/assets/images/home/2.png", // [!code warning] //   错误的使用方式
    bgcolor: "#284aa9"
  }
];

这种方式在本地调试时可以正常显示，但是在部署到服务器后就会出现 banner 图片 404 错误。

3、解决方案

banner: new URL("/src/assets/images/home/1.png", import.meta.url).href,

在图片路径前面添加 new URL()方法，将图片的相对路径转换为绝对路径。而import.meta.url返回当前模块的 URL 路径。

举例来说，当前模块主文件的路径是 https://foo.com/main.js， import.meta.url就返回这个路径。如果模块里面还有一个数据文件 data.txt，那么就可以用下面的代码，获取这个数据文件的路径。

new URL('data.txt', import.meta.url)

注意

Node.js 环境中，import.meta.url返回的总是本地路径，即是file:URL协议的字符串，比如file:///home/user/foo.js

详细请看 vite 官网的描述：https://cn.vitejs.dev/guide/assets.html