Vue的Nuxt项目部署在服务器,pm2动态部署和npm run build静态部署

Nuxt项目的部署有两种方式,一种是静态部署,一种是动态部署
静态部署需要关闭项目的ssr功能,动态部署则不需关闭,所以怎么部署项目就看你用不用ssr功能了 。

1.静态部署

先说静态部署,很简单,只需要在nuxt.config.ts中把ssr属性改为false即可
在这里插入图片描述

运行

npm run generate

会打包出一个dist文件,把这个文件上传到服务器,使用nginx代理即可
在这里插入图片描述
代理
在nginx.conf文件中找个位置,与其他server并其就行,写入一下内容即可,

server {listen     3030;#你项目设置的portserver_name  localhost;location / {root /mnt/oldagecrm/dist;# 你dist的位置index index.html index.htm;}}

重启nginx即可。

2.动态部署

只需要在nuxt.config.ts中把ssr属性改为true即可
运行

npm run build

构建完成
在这里插入图片描述

.output文件就是打包的文件,我们可以用pm2来启动这个文件。为了能够区分打包的文件和原项目文件,我们可以把打包后的文件放入新建的文件夹中,方便我们区分打包后的文件。

我们把红圈中的文件放入新文件中
在这里插入图片描述
然后创建ecosystem.config.js文件,写入一下内容。这个文件是pm2要用的

module.exports = {apps: [{name: 'test',exec_mode: 'cluster',instances: '1', // 进程数  Or a number of instancesport: '3030', //端口,testscript: './.output/server/index.mjs',//路径要写对。只要这个js文件和.output在同一目录下就没事error_file: './logs/app-err.log',out_file: './logs/app-out.log',log: './logs/app.log',args: 'start',env: {MODE: 'production'}}]
}

启动
使用以下命令启动nuxt项目即可实现动态部署了,说通俗点就是在服务器运行nuxt项目,但不同的是pm2运行是后台运行nuxt项目,比npm run dev前台运行好用。

# 启动
pm2 start
# 停止
pm2 stop all
# 删除
pm2 delete all
# 重启
pm2 restart all

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/212330.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React创建项目

React创建项目 提前安装好nodejs再进行下面的操作,通过node -v验证是否安装 1.设置源地址 npm config set registry https://registry.npmmirror.com/2.确认源地址 npm config get registry返回如下 https://registry.npmmirror.com/3.输入命令 npx create-re…

Clickhouse Join

ClickHouse中的Hash Join, Parallel Hash Join, Grace Hash Join https://www.cnblogs.com/abclife/p/17579883.html https://clickhouse.com/blog/clickhouse-fully-supports-joins-full-sort-partial-merge-part3 总结 本文描述并比较了ClickHouse中基于内存哈希表的3种连接…

一天一个设计模式---原型模式

基本概念 原型模式(Prototype Pattern)是一种创建型设计模式,其主要目的是通过复制现有对象来创建新对象,而不是通过实例化类。原型模式允许在运行时动态创建对象,同时避免了耦合与子类化。 在原型模式中&#xff0…

Mysql综合案例练习<1>

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books&#xff0c;表结构如下&#xff1a; CREATE DATABASE …

mysql基础之约束

在mysql中null和任何值都不相同&#xff0c;null和null也不相同 1.约束简介 1.1概念 约束英文&#xff1a;constraint 约束实际上就是表中数据的限制条件 1.2.作用 表在设计的时候加入约束的目的就是为了保证表中的记录完整性和有效性&#xff0c;比如用户表有些列的值&am…

docker-compose部署sonarqube 8.9 版本

官方部署文档注意需求版本 所以选择8.9版本 一、准备部署配置 1、持久化目录 rootlocalhost:/root# mkdir -p /data/sonar/postgres /data/sonar/sonarqube/data /data/sonar/sonarqube/logs /data/sonar/sonarqube/extensions rootlocalhost:/root# chmod 777 /data/sona…

「Swift」类淘宝商品瀑布流展示

前言&#xff1a;需要做一个类似于淘宝商品页面的瀑布流展示 结构分析&#xff1a; ps&#xff1a;图片来源 思路分析&#xff1a; 该瀑布流主要还是基于UICollectionView进行展示&#xff0c;只是在cell展示的UICollectionViewFlowLayout需要进行相应调整和自定义&#xff…

智能优化算法应用:基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.北方苍鹰算法4.实验参数设定5.算法结果6.参考…

python技术栈之单元测试中mock的使用

什么是mock&#xff1f; mock测试就是在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便测试的测试方法。 mock的作用 特别是开发过程中上下游未完成的工序导致当前无法测试&#xff0c;需要虚拟某些特定对象以便测试…

[node] Node.js的Web 模块

[node] Node.js的Web 模块 什么是 Web 服务器&#xff1f;Web的应用架构http使用方式使用 Node 创建 Web 服务器使用 Node 创建 Web 客户端 什么是 Web 服务器&#xff1f; Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上某种类型计算机的程序&#xff0c;Web服务器…

使用WalletConnect Web3Modal v3 链接钱包基础教程

我使用的是vueethers 官方文档&#xff1a;WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件&#xff0c;在main.js中引入&#xff0c;初始化配置sdk import {createWeb3Modal,defaultConfig, } from…

Vue3 Element-Plus 一站式生成动态表单:简化前端开发流程

文章目录 1. 引言2. Vue3 和 Element-Plus 简介2.1 Vue32.2 Element-Plus 3. 动态表单的需求与挑战4. Vue3 和 Element-Plus 动态表单的优势4.1 Vue3的组合式API4.2 Element-Plus的表单组件 5. 一站式生成动态表单的实现5.1 准备工作5.2 创建动态表单组件5.3 使用动态表单组件 …

uniapp横向滚动示例

目录 插件市场案例最后 插件市场 地址 案例 地址 最后 感觉文章好的话记得点个心心和关注和收藏&#xff0c;有错的地方麻烦指正一下&#xff0c;如果需要转载,请标明出处&#xff0c;多谢&#xff01;&#xff01;&#xff01;

读书笔记-《数据结构与算法》-摘要4[插入排序]

插入排序 核心&#xff1a;通过构建有序序列&#xff0c;对于未排序序列&#xff0c;在已排序序列中从后向前扫描(对于单向链表则只能从前往后遍历)&#xff0c;找到相应位置并插入。实现上通常使用in-place排序(需用到O(1)的额外空间) 从第一个元素开始&#xff0c;该元素可…

Science | 张锋实验室:聚类算法揭示188种新型CRISPR系统

微生物序列数据库包含大量有关酶和其他可用于生物技术的分子的信息。但近年来&#xff0c;这些数据库已经变得非常庞大&#xff0c;以至于很难有效地搜索到感兴趣的酶。 2023年11月23日&#xff0c;博德研究所张锋及美国国立卫生研究院Eugene V. Koonin共同通讯在Science 在线…

【原神游戏开发日志1】缘起

【原神游戏开发日志1】缘起 版权声明 本文为“优梦创客”原创文章&#xff0c;您可以自由转载&#xff0c;但必须加入完整的版权声明 文章内容不得删减、修改、演绎 相关学习资源见文末 大家好&#xff0c;最近看到原神在TGA上频频获奖&#xff0c;作为一个14年经验的游戏开…

C# Solidworks二次开发:三种获取SW设计结构树的方法-第一讲

今天要讲的方法是如何在Solidworks中获取左侧设计结构上的节点&#xff0c;获取节点的方法我所知道的有三种。 这三种方法满足我在使用过程的多种需求&#xff0c;下面先开始介绍第一个方法&#xff1a; 方法的API如下所示&#xff1a;GetComponents Method (IAssemblyDoc) 这…

基于单片机的电子密码锁设计

1&#xff0e;设计任务 利用AT89C51单片机为核心控制元件,设计一个简易的电子密码锁&#xff0c;可设置四位密码&#xff0c;输入错误三次&#xff0c;报警灯亮起&#xff08;红灯亮起&#xff09;&#xff0c;输入正确&#xff0c;绿灯闪烁三次。可通过LCD显示屏查看密码&…

Canvas鼠标画线

鼠标按下开始画线,鼠标移动根据鼠标的轨迹去画,鼠标抬起停止画线 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

Leetcode刷题笔记题解(C++):LCR 121. 寻找目标值 - 二维数组

思路&#xff1a;从左小角或者右上角开始遍历&#xff0c;假设右上角开始遍历&#xff0c;如果当前值大于目标值则列-1&#xff1b;如果当前值小于目标值则行1&#xff0c;以此遍历来查找目标值&#xff1b;注意col和row的选取 class Solution { public:bool findTargetIn2DPl…