首页 前端知识 关于静态资源打包上线后404的解决办法

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

2024-10-26 09:10:24 前端知识 前端哥 243 131 我要收藏

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

问题详情

keyvalue
框架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
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19170.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!