关于静态资源打包上线后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 文件引用。
解决办法
-
能用静态字符串方式引入的尽量用这种方式
-
后端返回的线上资源(带http的)不用担心以变量形式引入后丢失问题
-
若不免不了用变量方式引入静态资源,就类似组件一样先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