nuxt3项目打包部署上线

您所在的位置：网站首页 › updrs-iii评分29 › nuxt3项目打包部署上线

nuxt3项目打包部署上线

#nuxt3项目打包部署上线| 来源: 网络整理| 查看: 265

官方部署文档

想了解原来spa应用部署时nginx如何处理的，直接看最下面的 "问题"

第一步：配置环境变量 package.json文件配置 { "scripts": { "build:prod": "nuxt build --mode prod", "build:dev": "nuxt build --mode dev", "dev": "nuxt dev --mode dev", "prod": "nuxt dev --mode prod", "generate": "nuxt generate", "preview": "nuxt preview", } } 复制代码

我这边定义了dev环境和prod环境运行项目和打包的命令

--mode 自定义环境名

使项目获取相关环境参数。

nuxt.config.ts文件配置 import { loadEnv } from 'vite' interface VITE_ENV_CONFIG { VITE_HOST:string, VITE_BASE_URL:string } const envScript = process.env.npm_lifecycle_script?.split(' ') || [] const envName = envScript[envScript.length - 1] // 通过启动命令区分环境 const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG export default defineNuxtConfig({ runtimeConfig: { pubilc: envData } ... }) 复制代码

将环境变量内容放入runtimeConfig.pubilc下

创建env文件

根目录下创建env文件夹，文件例如.env.dev，.env.prod

注意变量开头必须为VITE才可将其暴露出去

// .env.dev VITE_BASE_URL='localhost' 复制代码 // .env.pord VITE_BASE_URL='线上地址' 复制代码如何使用

在文件下使用useRuntimeConfig()

demo.ts export default defineEventHandler(event => { let baseURL:string = useRuntimeConfig().public.VITE_BASE_URL console.log(baseURL) // 例如dev环境下打印的就是 'localhost' }) 复制代码第二步：配置pm2启动文件

服务器使用pm2启动项目，在服务器安装npm i pm2 -g

ecosystem.config.js module.exports = { app: [ { name: '项目名称', port: '80', //监听端口 exec_mode: 'cluster', instances: 'max', script: './server/index.mjs' } ] } 复制代码

将此文件放入build后的.output文件夹下

这里列出我自己常用的pm2 命令

pm2 list //查看所有pm2进程 pm2 start //启动进程 pm2 stop all //停止所有进程 pm2 stop 进程号 //停止某个进程 pm2 delete all //删除所有进程 pm2 delete 进程号 //删除某个进程 pm2 reload 进程号 //重启某个进程复制代码第三步：部署上传

使用scp命令手动将打包文件夹上传至服务器

scp -r ./.output root@服务器公网ip:~/目标文件夹名 //目标文件夹不存在将自己创建复制代码

随后输入服务器密码就ok了

启动

cd到目标文件夹下输入命令pm2 start，自动读取pm2的启动文件ecosystem.config.js

问题普通spa应用和nuxt3 ssr应用的区别

我之前的前端项目是基于vue3+vite的spa项目，此项目部署时打包出来有index.html文件，服务器需通过nginx将访问网址和项目"绑定起来"

// nginx.conf server { listen 80; server_name 47.108.62.93; location / { try_files $uri $uri/ /index.html = 404; root /root/blog_web; index index.html index.htm; } location /api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://47.108.62.93:8083/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 复制代码

而nuxt3下，通过npm run build打包后是node服务，所有没有.html文件，代替的是一个index.mjs启动文件，可通过node命令启动此文件而达到运行项目的目的。直接使用pm2启动，让项目运行在服务器后台。

停止原来的nginx进程，直接将pm2启动文件的监听端口改为80端口就可成功部署。

【本文地址】

nuxt3项目打包部署上线

nuxt3项目打包部署上线

今日新闻

推荐新闻