[开始更新3] ----------------------------
好消息:我已经构建并部署了Web应用程序,但是有错误:
。
1.我已将所有Nuxt项目移到src文件夹中。
2.我已将功能文件夹移至产品文件夹中,并将其重命名为服务器。
3.我创建了一个新的/ prod / user文件夹。
4.我创建了nuxt.config.js文件的副本,并将其复制到/ prod / server文件夹中,以便使用/prod/server/index.js文件。
5.我编辑了package.js。
6.我已经编辑了firebase.json文件。
7.最后,我编辑了/src/nuxt.config.js文件
package.js
{
"name": "ap-test-vue-nuxt",
"version": "1.0.0",
"description": "My first badass Nuxt.js project",
"author": "Alex Pilugin",
"private": true,
"scripts": {
"postinstall": "cd prod && cd server && npm install",
"start": "cd src && npm run dev",
"serve": "NODE_ENV=development firebase serve",
"build": "cd src && npm run build && cd .. && npm run copystatic && npm run copydist",
"generate": "cd src && npm run generate",
"deploy": "firebase deploy --only hosting,functions",
"copystatic": "cp -R src/static/ prod/client",
"copydist": "cp -R prod/server/nuxt/dist/ prod/client/assets",
"all": "npm run build && firebase deploy --only hosting,functions"
}
}
firebase.json
{
"functions": {
"source": "prod/server"
},
"hosting": {
"public": "prod/client",
"rewrites": [
{
"source": "**",
"function": "nuxtssr"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
}
}
nuxt.config.js
//Error when deploy functions: import colors from 'vuetify/es5/util/colors'
const colors = require('vuetify/es5/util/colors').default;
module.exports = {
mode: 'universal',
buildDir: "./../prod/server/nuxt",
ssrLog: true,
/*
** Build configuration
*/
build: {
publicPath: "/assets/",
cache: true,
extractCSS: true,
/*
** You can extend webpack config here
*/
extend(config, ctx) {
if (process.browser) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
}
}, ...
/prod/server/package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "8"
},
"dependencies": {
"@nuxtjs/axios": "^5.9.5",
"@nuxtjs/vuetify": "^1.11.0",
"firebase-admin": "^8.6.0",
"firebase-functions": "^3.3.0",
"nuxt-start": "^2.11.0",
"vuetify": "^2.2.17"
},
"devDependencies": {
"firebase-functions-test": "^0.1.6"
},
"private": true
}
/prod/server/index.js
// functions/index.js
const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");
const nuxtConfig = require("./nuxt.config.js");
const config = {
...nuxtConfig,
dev: false,
debug: false,
buildDir: "nuxt",
build: {
publicPath: "/assets/"
}
};
const nuxt = new Nuxt(config);
let isReady = false;
async function handleRequest(req, res) {
if (!isReady) {
try {
isReady = await nuxt.ready();
} catch (error) {
process.exit(1);
}
}
await nuxt.render(req, res);
}
exports.nuxtssr = functions.https.onRequest(handleRequest);
[更新3结束] -------------------------------
Nuxt.js版本2没有 server 文件夹,并且在将所有文件夹移动到新的 src 文件夹之后-我无法执行"npm run build"
命令。 ,因为:
找不到
nuxt build
命令!
我尝试在Google Firebase上部署我的第一个通用(SSR)Nuxt应用程序。 我几乎完成了Udemy课程Nuxt.js - Vue.js on Streroids的学习,现在该将我的应用程序上传到Google Firebase上了。
我发现了两种不同的实现方法:
1. dev.to: Deploy nuxt on Firebase。
2. dev.to: How to host Nuxt.js application on firebase with a single command
第二种方法-创建一个 src 文件夹并将所有项目移到 src 文件夹github.com/slushnys/dealas中,并且它在服务器端不使用Express.js(它使用nuxt-start
第一种方法-仅将文件夹移动到 src 文件夹中,但将所有主要文件保留在外面。在这种情况下,我们在服务器端使用Express.js-我现在不想使用。
我尝试在没有Express.js的情况下实现第一种方法(使用Nuxt-start库)。
//package.js
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
}
//firebase.json
{
"hosting": {
"public": "functions/.nuxt",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssrapp"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
}
}
//nuxt.config.js
import colors from 'vuetify/es5/util/colors'
export default {
//https://dev.to/kiritchoukc/deploy-nuxt-on-firebase-4ad8
srcDir: 'src', //move all folder into the src folder
buildDir: 'functions/.nuxt', //for firebase-functions
mode: 'universal',
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
},
extractCSS: true //https://dev.to/kiritchoukc/deploy-nuxt-on-firebase-4ad8
},
package.js中脚本的问题-我在 src 文件夹中找不到 server 文件夹:
当我尝试执行npm run build
时,我也看到错误:
> nuxt build
sh: nuxt: command not found
Nuxt版本:“ nuxt”:“ ^ 2.0.0”
我需要脚本“ dev”,“ start”,“ build”的命令来修复我的应用程序:(