Nuxt ^2.0.0 и Firebase хостинг

Question

Я пытаюсь развернуть приложение nuxt на хостинге firebase. В настоящее время я следую этому руководству, которое помогло мне развернуть приложение в облаке Firebase, то есть сгенерированном локальном URL хоста: http://localhost:5001/ **** / us-central1 / testApp

Однако при просмотре приложения на локальном хосте 5000 или локальном облачном хосте 5001 приложение не работает.

локальный: 5000

localhost: 5001

Упомянутый учебник - это эшафот с Vue cli, и я создал свой проект с npx create-nuxt-app, Кроме того, предполагая, что учебник использует Nuxt версии 1, которая имеет другой вывод dist, я использую версию 2, которая выводит каталог dist с двумя папками client а также server,

Я считаю, что проблема должна заключаться в том, что теги сценария не указывают на правильный путь, и это может быть связано с тем, как 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

Что я делаю неправильно?

Answer 1

Статические файлы находятся в папке клиента. Если вы поместите publicPath: '/client'