我在Firebase上的Vuetify Nuxt SSR（通用）应用程序正在挂起

Question

更新：我使用2个文件夹的方法：函数和src无法使用。当用于Firebase功能的文件夹位于src文件夹内时，我开始使用另一种方法。此方法由 winzaa123 用户winzaa123/nuxt2-vuetify-ssr-on-firebase实现，我可以在我的Google Firebase上启动它。

我的步骤：从头开始准备项目

在src文件夹中创建一个Nuxt应用程序：

1. 使用n_T=1500/300=5
在 src 文件夹中创建Nuxt应用
2. 选择软件包管理器Npm
3. 选择UI框架Vuetify.js
4. 选择通用渲染模式（SSR）

创建Firebase项目

1. 使用create-nuxt-app src
创建一个Firebase项目
2. 选择Firebase托管，Firebase功能，Firebase Firestore，Firebase存储，模拟器
3. 使用公共目录？ （公开）
4. 配置为单页应用（是/否）-是

在根文件夹中创建package.json文件

firebase init

编辑firebase.json文件

{
  "name": "test-nuxt",
  "version": "1.0.0",
  "description": "My fine Nuxt.js project",
  "author": "Alex Pilugin",
  "private": true,
  "scripts": {
    "postinstall": "cd functions && npm install",
    "dev": "cd src && npm run dev",
    "start": "cd src && npm run dev",
    "serve": "NODE_ENV=development firebase serve",
    "build": "cd src && npm run build",
    "build-deploy": "firebase deploy --only hosting,functions",
    "build-deployf": "firebase deploy --only functions",
    "build-deployh": "firebase deploy --only hosting"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0"
  }
}

您会看到我计划将 src / .nuxt / dist / client 的内容复制到 public / _nuxt 文件夹。 我这样做是因为我在 src / .nuxt / dist / server / client.manifest.json

内发现了{ "functions": { "source": "functions", "predeploy": [ "rm -rf functions/nuxt && npm --prefix src run build && mkdir -p functions/nuxt/dist && cp -r src/.nuxt/dist/ functions/nuxt/dist && cp src/nuxt.config.js functions/" ] }, "hosting": { "public": "public", "predeploy": [ "rm -rf public/* && mkdir -p public/_nuxt/ && cp -r functions/nuxt/dist/client/ public/_nuxt/ && cp -a src/static/. public/" ], "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "function": "nuxtssr" } ] }, "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "storage": { "rules": "storage.rules" } }

嵌套步骤是编辑functions / index.js文件

"publicPath": "/_nuxt/"

我使用const functions = require('firebase-functions'); const { Nuxt } = require("nuxt"); //const { Nuxt } = require("nuxt-start"); const config = { ssrLog: true, dev: true, // Don't start in dev mode. debug: true, //<----------------------- Debug logs buildDir: "nuxt", build: { //publicPath: '' //publicPath: '/_nuxt/', //Default: '/_nuxt/' <-- content of .nuxt/dist/client /* ** You can extend webpack config here */ extend ( config, { isDev, isClient, isServer } ) { if ( isServer ) { config.externals = { '@firebase/app': 'commonjs @firebase/app', '@firebase/firestore': 'commonjs @firebase/firestore', //etc... } } } } } const nuxt = new Nuxt(config); let isReady = false; async function handleRequest(req, res) { console.log("nuxtssr is running..."); if (!isReady) { console.log("isReady: " + isReady); try { console.log("waiting for nuxt.ready()......."); isReady = await nuxt.ready(); console.log("nuxt is ready"); } catch (error) { console.log("ERROR....................."); console.log(error); //throw new functions.https.HttpsError('error in Nuxt', error); process.exit(1); } } console.log("waiting for nuxt.render()......."); /* * res.set('Cache-Control', 'public, max-age=1, s-maxage=1'); * await nuxt.render(req, res); */ res.set("Cache-Control", "public, max-age=300, s-maxage=600"); return new Promise((resolve, reject) => { console.log("before nuxt.render......"); nuxt.render(req, res, promise => { console.log("inside nuxt.render......"); promise.then(resolve).catch(reject); }); }); } exports.nuxtssr = functions.https.onRequest(handleRequest); 在本地启动该应用程序：

$ npm start

我使用Nuxt.js v2.12.2 Running in development mode (universal) Listening on: http://localhost:3000/ 命令部署了应用程序，但是看不到任何前端。我的申请挂了。

Answer 1

据我了解，firebase托管对于静态文件而言仅 。如果您尝试执行SSR，则意味着服务器正在运行，并且服务器端正在进行一些处理。您可能需要将其作为“无服务器”应用程序部署到Google Cloud Functions。以this tutorial为例。

也就是说，我对Nuxt并不超级熟悉，但是我可以看到，如果确实要部署到正确的位置，您可能需要做两件不同的事情。

首先，hosting.public中的firebase.json属性应该是包含已构建项目的文件夹的路径。由于您已经说过您的项目是在public/_nuxt中构建的，因此您可能需要更改此属性以使其匹配，即在firebase.json中具有

{
  ...
  "hosting": {
    "public": "public/_nuxt",
    ...
  },
  ...
}

对于有价值的东西，在常规（即非Nuxt）Vue项目中，该项目建立在dist/文件夹中，因此在我的firebase.json文件中，我拥有"public": "dist"。就是说，我从来没有在Firebase上托管过Nuxt SSR项目，所以这可能不是它的结构形式。

第二，您可能需要先运行nuxt build或nuxt generate ，然后再运行firebase deploy ，以便将项目构建到目标目录。 firebase deploy命令实际上只是将文件上传到Google平台上的一种好方法。

希望这会有所帮助！