【解决方案】Vue项目部署指南:Nginx部署前端Vue.js项目

embedded/2024/9/20 0:22:47/ 标签: 前端, Nginx, Vue, vue.js, 部署, 服务器

目录

Vue_1">一、部署Vue前端项目

NginxSLL_2">1.1、Nginx的下载安装与SLL配置

首先查找Nginx安装的路径,查看是否安装过nginx:
输入:whereis nginx
如果显示地址,说明已经安装过nginx了。可以跳到2.2步。

如果没有安装,首先需要安装一些必要环境,在终端中依次输入以下指令,安装必要的包

yum install gcc-c++ 
yum install -y pcre pcre-devel 
yum install -y zlib zlib-devel 
yum install -y openssl openssl-devel 

下载linux版本的Nginx
官网下载:https://nginx.org/en/download.html

下载稳定版本,我下的是1.22.1
在这里插入图片描述

安装包名为nginx-1.22.0.tar.gz,将其放到服务器的/usr/local/nginx目录下,初始没有nginx文件夹需要新建一个空的nginx。
安装Nginx
首先需要解压Nginx的安装包,先cd /usr/local/nginx到nginx目录,然后使用tar -zxvf nginx-1.22.1.tar.gz解压刚刚下载的安装包。
在这里插入图片描述
然后进入nginx-1.22.1文件夹的configure目录下,输入:

./configure
make
make install

在这里插入图片描述
在这里插入图片描述

进行安装,安装后的完整文件夹如下图所示:
在这里插入图片描述

下一步配置ssl,如果本身没有ssl模块,在安装时要安装ssl模块的nginx:./configure --prefix=/usr/local/nginx --with-http_ssl_module
make进行安装:make
输入以下cp指令:

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
cp ./objs/nginx /usr/local/nginx/sbin/

会出现是否覆盖的选项,输入y覆盖掉

最后输入whereis nginx,如果显示地址,说明已经安装过nginx了。

可能遇见的问题
如果提示说无法创建普通文件"/usr/local/nginx/sbin/nginx",需要先暂停nginx再启动:/usr/local/nginx/sbin/nginx -s quit(或者niginx -s stop 或者killall nginx)然后再输入
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

Vue_54">1.2、打包Vue项目

开发完成后,在终端输入npm run build或者vite build进行打包,不同项目的打包指令和流程可能不相同,需要查看package.json的具体配置。
在这里插入图片描述
打包完成后,会生成一个dist文件夹,就是成功打包。
在这里插入图片描述

Nginx_59">1.3、上传项目到Nginx目录

查找Nginx安装的路径,输入:whereis nginx,找到nginx的目录,将打包好的文件夹(即dist文件夹)上传至/usr/local/nginx/html目录下:

Nginx_61">1.4、配置Nginx

进入nginx/conf目录,在其中找到名为nginx.conf的文件,打开,找到server部分:

  1. 端口号 listen (输入要监听的端口号,我的是5173);
  2. 域名配置 server_name (输入自己服务器的ip 例如:127.0.0.1 如果有域名可以输入域名);
  3. 前端项目存放地址 root:(打包后的vue项目文件夹例如:html/dist);
    在这里插入图片描述

配置好后,启动Nginx,在nginx下的sbin目录下输入./nginx,既可以检查配置正常启动。

Nginx_70">二、Nginx命令速览

./nginx -s reload // 重启nginx
./nginx // 启动nginx
./nginx -t //测试Nginx配置文件是否正确

http://www.ppmy.cn/embedded/107214.html

相关文章

【论文笔记】Multi-Task Learning as a Bargaining Game

Abstract 本文将多任务学习中的梯度组合步骤视为一种讨价还价式博弈(bargaining game),通过游戏,各个任务协商出共识梯度更新方向。 在一定条件下,这种问题具有唯一解(Nash Bargaining Solution),可以作为多任务学习中的一种原则…

js | XMLHttpRequest

是什么? 和serve交互数据的对象;能够达到页面部分刷新的效果,也就是获取数据之后,不会使得整个页面都刷新;虽然名字是XML,但不限于XML数据。 怎么用? function reqListener() {console.log(thi…

“Jmeter-InfluxDB-Grafana“常见错误有哪些如何解决?

常见错误: 1.网络不同,检查网络IP是否写对,端口号有没有放开(Centos7端口号命令),防火墙是否关闭 firewall-cmd --add-port3000/tcp --permanent firewall-cmd --add-port3000/udp --permanent firewall-…

量子运算-计算新时代的开端

1. 量子计算的基础概念 1.1 量子比特 (Qubit) 量子比特,或称Qubit,是量子计算的基本单位。与经典比特的二进制状态不同,量子比特可以处于多个状态的叠加态。这种状态的独特性源自量子力学的两个基本特性:叠加和纠缠。 数学表示…

uniapp APP版本更新

var dtask plus.downloader.createDownload(userl.value, {}, function(d, status) {if (status 200) { // 下载完成-进行安装console.log(下载status, d, status)// console.log("Download success: " d.filename);this.show_update falseplus.runtime.install(…

渠道开发的工作流程是什么?分哪几个阶段!

很多招商的品牌方,都会有一个疑问,渠道开发都分为哪几个阶段,每个阶段都需要安排哪些员工,做什么工作! 作为一名10年渠道开发的老司机,我给大家分享下我的方法! 1、分析市场阶段。 所有项目开…

读取obj文件中的vt并转成需要的uv数据

先展示效果图 适用场景:加载的obj模型需要发生形变,同时还要展示模型的纹理效果,可以使用到面料模拟或者弹性物体的模拟当中 具体实现方案: 1、读取obj文件中的vt的值,存起来 2、读取f值,存v索引和vt索引 3…

TCP编程

目录 一丶socket 1.简介 2.类型 3.端口 port 4.端口转换 5.IP地址转换 二丶TCP编程 函数接口: 1.socket 2.bind 3.linten 4.accept 5.recv 6.connect 7.send 服务器代码: 客户端代码 一丶socket 1.简介 1》1982 - Berkeley Software D…

经验笔记:Feeds流设计与实现

Feeds流设计与实现经验笔记 一、概述 Feeds流是一种动态的消息或内容展示方式,常见于社交媒体、新闻应用、博客平台等。它按照一定的逻辑(通常是时间顺序或算法推荐)将内容展现给用户。设计一个好的Feeds流不仅需要考虑技术实现&#xff0c…

【C++】简述STL——string类的使用

文章目录 一、STL的简述1.STL的框架2.STL版本 二、string1、string的介绍2、为什么string类要实现为模板? 三、string的构造接口四、string的容量相关的接口五、string对象修改相关的接口1、insert2.earse3、assign4、replace 六、string对象字符串运算相关接口1、c…

Tomato靶场渗透测试

1.扫描靶机地址 可以使用nmap进行扫描 由于我这已经知道靶机地址 这里就不扫描了 2.打开网站 3.进行目录扫描 dirb http://172.16.1.113 发现有一个antibot_image目录 4.访问这个目录 可以看到有一个info.php 5.查看页面源代码 可以发现可以进行get传参 6.…

如何理解互斥锁概念

目录 一、什么是互斥锁 1、定义 2. 工作原理 3. 避免问题 4. 实现方式 5. 使用场景 一、什么是互斥锁 1、定义 互斥锁(Mutual Exclusion Lock)是一种机制,用于确保同一时间只有一个线程可以访问特定的共享资源。它类似于一把“锁”&…

redis被攻击redis READONLY You can‘t write against a read only slave.

redis 日志路径 /var/log/redis 拿下来后发现有这种错误 Operation now in progress 可能是网络断开导致, 查找redis whereis redis 修改 vim /etc/redis.conf 大概在300行 下面代码yes改no slave-read-only no 重启redis sudo systemctl restart redis.…

【Python】简单的数据类型——int、float、bool、str

目录 1. 整数类型 int 2. 浮点数类型 float 3. 布尔类型 bool 4. 字符串 str 5. 类型转换 5.1 隐式类型转换 5.2 显示类型转换 6. 输出 6.1 print函数 6.2 格式化输出 7. 输入 1. 整数类型 int a 10 print(type(a)) print(type(-2))<class int> <class i…

ARM发布新一代高性能处理器N3

简介 就在2月21日&#xff0c;ARM发布了新一代面向服务器的高性能处理器N3和V3&#xff0c;N系列平衡性能和功耗&#xff0c;而V系列则注重更高的性能。此次发布的N3&#xff0c;单个die最高32核&#xff08;并加入到CCS&#xff0c;Compute Subsystems&#xff0c;包含Core&a…

基于uniapp的畅玩旅游景点门票预订系统的设计与实现b3w12 微信小程序

目录 博主介绍技术栈系统设计&#x1f31f;文末获取源码数据库&#x1f31f;具体实现截图后端前端java类核心代码部分展示可行性论证个人心得系统测试操作可行性源码获取详细视频演示 博主介绍 &#x1f447;&#x1f3fb; 博主介绍&#xff1a;&#x1f447;&#x1f3fb; 专…

如何本地搭建Whisper语音识别模型|语音识别|本地部署

目录 1. 环境配置 1.1 操作系统要求 1.2 安装依赖库 1.3 GPU支持的配置 2. 获取Whisper模型 2.1 克隆Whisper代码库 2.2 下载预训练模型 3. Whisper模型的部署与使用 3.1 加载Whisper模型 3.2 处理音频数据 3.3 语音识别 4. Whisper模型的高级配置与优化 4.1 自定…

利用TOPSIS算法进行生长素和施肥量对农作物各指标影响力的分析

文章目录 1 摘要2 问题的重述1&#xff0e; 背景介绍2&#xff0e; 问题的产生及进行数学建模的意义 3 TOPSIS算法1. TOPSIS算法介绍2. TOPSIS算法使用步骤 4 问题的分析1. 对问题一的分析及解答2. 对问题二的分析及解答3. 对问题三的分析及解答 5 模型的改进1. 验证2.模型改进…

聊聊,IEEE论文的含金量!

IEEE论文的含金量在学术界被广泛认可&#xff0c;这主要体现在以下几个方面&#xff1a; 学术价值&#xff1a;IEEE论文的学术价值体现在其研究内容的深度和广度上。这些论文通常涉及前沿的科学技术问题&#xff0c;提出创新性的理论、方法或实验结果。例如&#xff0c;在人工…

STL容器中 list(双向链表)的增删改查

list&#xff08;双向链表&#xff09; std::list 是 C 标准模板库&#xff08;STL&#xff09;中的一个容器&#xff0c;它实现了一个双向链表。双向链表中的每个元素都包含三个部分&#xff1a;存储数据的元素本身、指向前一个元素的指针&#xff08;或迭代器&#xff09;、…