关于静态资源打包上线后404的解决办法

关于静态资源打包上线后404的解决办法

问题详情

key	value
框架	uniapp+vue3+ts+vite
环境	node 20.10.0 pnpm

部署测试环境加入上下文后静态资源报404错误，排查后发现，img标签中src属性值用变量形式引入的本地资源都找不到了，线上资源以及写死的串形式是可以找到的。

排查原因

vite文档里有段话引起我的注意：

public 目录(https://cn.vitejs.dev/guide/assets.html#the-public-directory)

如果你有下列这些资源：

• 不会被源码引用（例如 robots.txt）
• 必须保持原有文件名（没有经过 hash）
• …或者你压根不想引入该资源，只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public，但可以通过 publicDir 选项 来配置。

请注意：

• 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
• public 中的资源不应该被 JavaScript 文件引用。

解决办法

1. 能用静态字符串方式引入的尽量用这种方式

2. 后端返回的线上资源(带http的)不用担心以变量形式引入后丢失问题

3. 若不免不了用变量方式引入静态资源，就类似组件一样先import引入再赋值到相应位置

   例如:

   // 名字自定义
   import shengHeZhong from '@/assets/static/check/1.png'
   
   const checkUrl = computed(() => {
     // 0-未提交 1审核中 2 已审核
     switch (props.userStaus) {
       case 1:
         return shengHeZhong
     }
     // 下面这种方式本地没问题, 上线也会有问题
     // return new URL(
     //   'assets/static/check/' +  + '.png',
     //   import.meta.url,
     // ).href
   })
   

但，此方法在测试环境能用了，上了我们正式环境叒找不到文件了【菜菜流泪.jpg】，此时我的友友找到新方法，在此感谢她！

new URL('@/assets/static/check/1.png',import.meta.url).href