我正在尝试将我的 Universal Nuxt.js 应用程序部署到 Firebase。有关执行此操作的所有信息似乎都已过时,我无法使其完全正常工作。
SSR 似乎与托管的静态 Assets 一起工作。但是,例如,中间件仅在客户端上执行,而不是在服务器上执行(例如,当它首次通过 SSR 加载时),当它部署在具有 firebase 功能/托管(或使用 firebase serve
)的 firebase 上时。
我有以下项目结构:
project
└─ /functions (firebase functions including `nuxt/` built files)
└─ /src (nuxt app, using `create-nuxt-app` starter template)
└─ /public (includes static files and built nuxt client files)
└─ firebase.json
在 src/nuxt.config.js
设置构建选项mode: 'universal',
...
buildDir: process.env.NODE_ENV === 'development' ? '.nuxt' : '../functions/nuxt',
build: {
publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/',
extractCSS: true,
...
}
在 functions/package.json
设置为使用节点 v8"engines": {
"node": "8"
},
...
和以下到functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin')
const { Nuxt } = require('nuxt')
const express = require('express')
const app = express()
// Set Nuxt.js options
const config = {
dev: false,
buildDir: 'nuxt',
build: {
publicPath: '/'
},
}
const nuxt = new Nuxt(config)
function handleRequest(req, res) {
res.set('Cache-Control', 'public, max-age=300, s-maxage=600')
nuxt.renderRoute('/')
.then(result => {
res.send(result.html)
})
.catch(e => {
res.send(e)
})
}
app.get('*', handleRequest)
exports.nuxtapp = functions.https.onRequest(app)
在 firebase.json
指示firebase使用该功能"rewrites": [
{
"source": "**",
"function": "nuxtapp"
}
]
我还添加了来自 src/package.json
的所有依赖项至functions/package.json
.在
npm run build
在 src
文件夹,构建的 Nuxt 客户端文件 ( firebase/nuxt/dist/client/*
) 和应用程序的静态文件 ( src/static/*
) 被复制到 public
部署之前的文件夹(用于 Firebase 静态托管和 CDN)。使用此设置,静态 Assets 托管和 SSR 在部署到 Firebase 时似乎可以工作,但
middleware/asyncData/nuxtServerInit/etc
使用 Firebase 函数在服务器端呈现时未执行。例如,在本地开发模式下(
npm run dev
),中间件在服务器/客户端上都可以正常工作。在 Firebase 上部署时,我错过了什么或做错了什么?
谢谢!
最佳答案
如果您使用的是 Nuxt 2.12>,则您的 nuxt.config.js 文件不需要具有“mode”属性。只需使用目标:https://nuxtjs.org/docs/configuration-glossary/configuration-target/ (静态也适用于 SSR)
您的中间件目录用于将要在客户端和 SSR 中执行的中间件放置在用户访问的每个页面中。但是,如果您正在寻找与云功能一起使用的服务器中间件,您可以使用 Nuxt 服务器中间件:https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/
(查看此文档以获取有关中间件与服务器中间件的详细信息)
关于javascript - 将 Vue/Nuxt 应用程序作为具有 SSR 的通用应用程序部署到 Firebase,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54598274/