Nuxt ^2.0.0 和 Firebase 托管

Question

我正在嘗試將我的 nuxt 應用程序部署到 Firebase 托管。 我目前正在關注本教程，它幫助我將應用程序部署到 firebase 雲，即生成的本地主機 URL： http://localhost:5001/ ****/us-central1/testApp

但是，當我在本地主機 5000 或雲本地主機 5001 中查看應用程序時，應用程序已損壞。

本地主機：5000

本地主機：5001

提到的教程是 Vue cli 的腳手架，我使用npx create-nuxt-app創建了我的項目。 另外，假設本教程使用 Nuxt 版本 1，它具有不同的 dist 輸出，我使用的版本 2 輸出帶有兩個文件夾client和server的 dist 目錄。

我認為問題已經成為了script標簽沒有指向正確的道路，那可能與如何要么做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'