vue.js Nuxt3:CSS/JS files 404 Error when deploying to test channel of Firebase Hosting

x4shl7ld  于 6个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(126)

我一直在尝试部署Nuxt 3项目(我最近加入)从Github Actions到Firebase Hosting(在合并主分支时部署到实时通道&在合并开发分支时部署到测试临时通道)。工作流脚本运行良好,应用程序正常构建,但在访问测试通道URL时报告丢失了一堆CSS和JS文件,原因是它们是用文件名中的特定散列构建的,这些散列与页面试图到达的散列不同(例如:应用程序构建了entry.7c2ea9b2.js,页面正在尝试加载entry.37b79eda.js,这是几个文件的情况,因此页面看起来真的关闭了)。我注意到当我把项目拉到我的机器上并从CLI部署到Firebase时也发生了同样的问题。然而,我的队友,他们一直使用同一台机器来部署,我成功地部署了项目,没有出现这个问题,所以我猜这和缓存有关。虽然我不确定它是和Firebase还是Nuxt项目文件有关。如果我运行nuxt generate命令,就不会发生这种情况,但这只适用于静态页面,动态路由和其他一些页面得到同样的404错误。我试过删除.output和.nuxt文件夹,以及/.firebase中的托管.cache文件,但没有变化。
我们用于构建和部署的命令是npx cross-env NITRO_PRESET=firebase npm run build,然后是npx firebase deploy(或者用于测试通道的hosting:channel:deploy testing)。
下面是工作流脚本:

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main
      - dev

jobs:
  dev:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/dev'
    steps:
      - uses: actions/checkout@v2
      - run: npm install && npx cross-env NITRO_PRESET=firebase npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DESK_APP }}'
          channelId: testing
          projectId: desk-app
          target: desk-app

字符串
框架版本:Nuxt 3.1.1硝基2.1.1 vite v4.0.4
提前感谢您的帮助。

  • 删除.nuxt和.output文件夹
  • npx cross-env NITRO_PRESET=firebase npm run buildnuxt generatenpm cache clean --forcenpx firebase deploy:只有“nuxt generate”修复了404错误,但仅限于静态页面。

预期行为:在部署时,Firebase正在更新其缓存,测试页面应该指向具有正确哈希值的公共文件,因为它们是在部署之前的过程中构建的。

rsl1atfo

rsl1atfo1#

我在尝试将我的Nuxt 3应用部署到Firebase测试通道时遇到了类似的问题:只有我的预渲染页面显示。
相反,我尝试正常部署(使用“firebase deploy”命令),它工作得很好。
Nuxt/硝基(不确定是哪一个)需要创建和部署一个firebase云函数来为你的动态内容服务,但我认为(如果我错了请纠正我)它只在使用“firebase deploy”而不是“hosting:channel:deploy”时才这样做。我怀疑这是因为在“firebase deploy”期间,日志显示它正在创建这样一个云函数,而在“hosting:channel:deploy”期间没有。
不确定这是否对你的情况有帮助,但它可能对任何有类似问题的人有用。

相关问题