Nuxt ^ 2.0.0和Firebase托管

Question

我正在尝试将nuxt应用程序部署到Firebase托管。我目前正在关注this tutorial，该帮助我将应用程序部署到了Firebase云，即生成的本地主机网址：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
  }
}

functions / 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

我在做什么错了？

Answer 1

静态文件位于客户端文件夹中。如果您放置publicPath：'/ client'