Nuxt ^2.0.0 和 Firebase 托管

Posted 2023-02-22

【中文标题】Nuxt ^2.0.0 和 Firebase 托管

【英文标题】：Nuxt ^2.0.0 and Firebase Hosting

【发布时间】：2019-07-23 20:29:03

【问题描述】：

我正在尝试将我的 nuxt 应用程序部署到 Firebase 托管。我目前正在关注this tutorial，它帮助我将应用程序部署到 Firebase 云，即生成的本地主机 url：http://localhost:5001/****/us-central1/testApp

但是，当我在本地主机 5000 或云本地主机 5001 中查看应用程序时，应用程序已损坏。

localhost:5000

localhost: 5001

提到的教程是使用 Vue cli 的脚手架，我使用 npx create-nuxt-app 创建了我的项目。另外，假设本教程使用 Nuxt 版本 1，它具有不同的 dist 输出，我使用的是版本 2，它输出包含两个文件夹 client 和 server 的 dist 目录。

我认为问题一定是the script tags not pointing to the right path，这可能与nuxt.config.js、functions/index.js 或firebase.json 文件的编写方式有关。也可能是public 目录的结构。

nuxt.config.js

const pkg = require('./package')

module.exports = 
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: 
    title: pkg.name,
    meta: [
        charset: 'utf-8'
      ,
      
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      ,
      
        hid: 'description',
        name: 'description',
        content: pkg.description
      
    ],
    script: [
      src: '/bundle.min.js',
      body: true
    ],
    link: [
        rel: 'apple-touch-icon',
        size: '180x180',
        href: '/img/apple-touch-icon.png'
      ,
      
        rel: 'icon',
        type: 'image/png',
        href: '/img/favicon-32x32.png'
      ,
      
        rel: 'icon',
        type: 'image/png',
        href: '/img/favicon-16x16.png'
      ,
      
        rel: 'manifest',
        href: '/img/site.webmanifest'
      ,
      
        rel: 'mask-icon',
        href: '/img/safari-pinned-tab.svg',
        color: '#da532c'
      ,
      
        rel: 'shortcut icon',
        href: '/img/favicon.ico',
      ,
      
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'
      ,
      
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Poppins:400,500,600,700'
      ,
      
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/regular.css',
        integrity: 'sha384-z3ccjLyn+akM2DtvRQCXJwvT5bGZsspS4uptQKNXNg778nyzvdMqiGcqHVGiAUyY',
        crossorigin: 'anonymous'
      ,
      
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/brands.css',
        integrity: 'sha384-QT2Z8ljl3UupqMtQNmPyhSPO/d5qbrzWmFxJqmY7tqoTuT2YrQLEqzvVOP2cT5XW',
        crossorigin: 'anonymous'
      ,
      
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css',
        integrity: 'sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT',
        crossorigin: 'anonymous'
      ,
      
        rel: 'stylesheet',
        href: '/styles.css'
      
    ]
  ,

  /*
   ** Customize the progress-bar color
   */
  loading: 
    color: '#fff'
  ,

  /*
   ** Global CSS
   */
  css: [],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   */
  axios: 
    // See https://github.com/nuxt-community/axios-module#options
  ,

  /*
   ** Build configuration
   */
  buildDir: './functions/nuxt',
  build: 
    publicPath: '/public/',
    extractCSS: true
  

函数/index.js

const functions = require('firebase-functions')
const express = require('express')
const 
  Nuxt
 = require('nuxt')

const app = express()

const config = 
  dev: false,
  buildDir: 'nuxt',
  build: 
    publicPath: '/public/'
  

const nuxt = new Nuxt(config)

function handleRequest(req, res) 
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => 
    res.send(result.html)
  ).catch(e => 
    res.send(e)
  )

app.get('*', handleRequest)
exports.testApp = functions.https.onRequest(app)

firebase.json

  "hosting": 
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      "source": "**",
      "function": "testApp"
    ]
  

公共目录结构

-| public/ ----| client ----| server

我做错了什么？

【参考方案1】：

静态文件位于客户端文件夹中。如果你把 publicPath: '/client'