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

更新：我的方法使用2个文件夹：函数和src在不工作。当firebase函数的文件夹位于src文件夹内时，我开始使用另一种方法。这种方法由winzaa123用户实现：我可以在我的Google firebase上启动它

我的步骤：从头开始准备项目 在src文件夹内创建Nuxt应用程序：

使用

Create numxt app src

选择包管理器Npm

选择UI framework Vuetify.js

选择通用渲染模式（SSR）

创建Firebase项目

使用

Firebase init

选择Firebase主机、Firebase函数、Firebase Firestore、Firebase存储、模拟器

使用公共目录？（公众）

配置为单页应用程序（是/否）-是

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

编辑firebase.json文件 您可以看到，我计划将src/.nuxt/dist/client的内容复制到public/\u nuxt文件夹中。 我这样做是因为我在src/.nuxt/dist/server/client.manifest.json中找到了

“publicPath”：“/\u nuxt/”

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

$firebase deploy

命令部署应用程序，但看不到任何前端。我的申请挂起了。

---

据我所知，firebase托管仅适用于静态文件。如果您试图进行SSR，这意味着服务器正在运行，并且服务器端正在进行一些处理。您可能需要将其作为“无服务器”应用程序部署到谷歌云功能中。请看一个例子

也就是说，我对Nuxt不是非常熟悉，但我可以看到，如果您确实要部署到正确的位置，那么您可能需要做两件事

首先，

firebase.json

中的

hosting.public

属性应该是包含生成项目的文件夹的路径。由于您说过您的项目是在

public/\u numxt

中构建的，因此您可能需要更改此属性以匹配，即在

firebase.json

中

{
...
“托管”：{
“public”：“public/_numxt”，
...
},
...
}

值得一提的是，在常规（即非Nuxt）Vue项目中，项目构建在

dist/

文件夹中，因此在我的

firebase.json

文件中，我有

“public”：“dist”

。也就是说，我从来没有在firebase上主持过Nuxt SSR项目，所以它的结构可能不是这样的

其次，在运行

firebase deploy

之前，您可能需要运行

numxt build

或

numxt generate

，以便将项目构建到目标目录。

firebase deploy

命令实际上只是一种将文件上传到谷歌平台的奇特方式

---

希望这有帮助

不幸的是，它没有起作用。“函数”中有“predeploy”命令，其中包含“npm——前缀src run build”命令——这意味着我在“firebase deploy”之前运行“nuxt build”

{
  "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"
  }
}

{
  "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"
  }
}

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);

Nuxt.js v2.12.2                           
Running in development mode (universal)   
Listening on: http://localhost:3000/