[英]Deploy Nuxt 3 website to Firebase Hosting
我按照這篇文章將Nuxt 3
網站部署到Firebase Hosting
。
所以這是我的functions/index.js
的內容:
const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");
// Require nuxt config
const nuxtConfig = require('./nuxt.config.js')
const config = {
...nuxtConfig,
dev: false,
buildDir: "nuxt",
};
const nuxt = new Nuxt(config);
exports.ssrapp = functions.https.onRequest(async (req, res) => {
await nuxt.ready();
nuxt.render(req, res);
});
這是我的functions/package.json
:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint .",
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
"lintfix": "npm run lint:js -- --fix"
},
"engines": {
"node": "16"
},
"main": "index.js",
"dependencies": {
"firebase-admin": "^10.0.2",
"firebase-functions": "^3.18.0",
"nuxt-start": "^2.15.8",
"@nuxt/content": "^1.15.1",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"eslint": "^8.9.0",
"eslint-config-google": "^0.14.0",
"firebase-functions-test": "^0.2.0",
"@babel/eslint-parser": "^7.16.3",
"@fortawesome/fontawesome-free": "^6.1.2",
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/eslint-config-typescript": "^8.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/google-fonts": "^3.0.0-0",
"@nuxtjs/svg": "^0.4.0",
"@nuxtjs/vuetify": "^1.12.3",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^8.2.0"
},
"private": true
}
nuxt.config.js
:
import colors from 'vuetify/es5/util/colors'
module.exports = {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s', //'%s - test',
title: 'test',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
'@nuxtjs/svg'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/content
'@nuxt/content',
'@nuxtjs/google-fonts'
],
// Content module configuration: https://go.nuxtjs.dev/config-content
content: {},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
defaultAssets: { icons: 'fa' },
treeShake: true,
customVariables: ['~/assets/variables.scss'],
optionsPath: './vuetify.config.js',
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
我將.nuxt
內容復制到functions/nuxt
以及nuxt.config.js
到functions
目錄中。
現在,當我運行firebase deploy --only functions
時,我收到此錯誤:
- 功能:完成運行預部署腳本。 i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... i artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
- artifactregistry:需要 API artifactregistry.googleapis.com 已啟用
- 功能:需要 API cloudfunctions.googleapis.com 已啟用
- 功能:需要 API cloudbuild.googleapis.com 已啟用 i 功能:為部署准備代碼庫默認值
錯誤:無法從源加載 function 定義:無法從 function 源生成清單:語法錯誤:無法在模塊外使用導入語句
我已經嘗試添加:
“類型”:“模塊”
到functions/package.json
。 這會導致不同的錯誤消息:
- 功能:完成運行預部署腳本。 i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... i artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
- 功能:需要 API cloudfunctions.googleapis.com 已啟用
- artifactregistry:需要 API artifactregistry.googleapis.com 已啟用
- 功能:需要 API cloudbuild.googleapis.com 已啟用 i 功能:為部署准備代碼庫默認值
錯誤:無法從源加載 function 定義:無法從 function 源生成清單:語法錯誤:無法在模塊外使用導入語句
這個項目是否在其他方面工作? 因為我注意到你說的是 Nuxt3,但你的項目在某些方面看起來像一個 nuxt2 項目。
我注意到的東西:
它適用於新的 nuxt3 項目嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.