使用 nginx 服务器部署Vue项目

news2025/9/19 19:46:17

安装nginx 文本代理服务器

centos下载

注意需要root权限

在CentOS服务器上下载Nginx可以通过以下步骤完成:

更新系统软件包列表:

yum update

安装EPEL存储库(Extra Packages for Enterprise Linux):

yum install epel-release

安装Nginx服务器:

yum install nginx

启动Nginx服务并设置开机自启动:

systemctl start nginx

systemctl enable nginx

这样就成功在CentOS服务器上下载并安装了Nginx服务器。您可以使用systemctl status nginx命令来检查Nginx服务的运行状态

在Ubuntu上安装Nginx

注意需要root权限

更新软件包列表:

apt update

安装Nginx服务器:

apt install nginx

启动Nginx服务并设置开机自启动:

systemctl start nginx

systemctl enable nginx

检查Nginx服务状态:

systemctl status nginx

现在您已经成功在Ubuntu上安装了Nginx服务器。您可以通过浏览器访问服务器的IP地址来确认Nginx是否正常运行。

使用Nginx压缩包的方式安装nginx

考虑到有些人的服务器连不到外网

需要在Nginx官方网站上下载最新版本的Nginx压缩包。也可以使用wget命令下载压缩包,例如:

wget http://nginx.org/download/nginx-1.20.1.tar.gz

请注意,您需要将上述链接替换为最新版本的Nginx压缩包链接。

下载完成后,解压缩Nginx压缩包:

tar -zxvf nginx-1.20.1.tar.gz

进入解压后的Nginx目录:

cd nginx-1.20.1

配置并编译Nginx:

./configure $ make $ sudo make install

安装完成后,您可以启动Nginx服务:

nginx

这样就完成了使用压缩包下载并安装Nginx的过程。请注意,这种方法需要手动编译和安装,相对于包管理器安装可能需要更多的配置和管理工作。

打包vue项目

npm run build

出现dist文件夹

配置nginx

定位配置文件

首先,找到你的Nginx配置文件。它的默认位置位于/etc/nginx/nginx.conf

如图:

这力我们直接vim打开并编辑(按i进入编写,:qw! 退出保存)

vim /etc/nginx/nginx.conf

提示如下:

server {
listen 80;                                       # 该网站端口号
server_name your-domain.com;   # 替换为你的域名或ip,如果你的是域名,你要确保DNS能解析

root /path/to/your/vue/dist;            # 替换为你的Vue项目构建后的dist目录
index index.html;

location / {
try_files $uri $uri/ /index.html;        # 如果找不到对应的文件或目录,则返回index.html
}
}

上面可以看到默认网页文件要放到 /path/to/your/vue/dist 中。

将刚刚打包的dist文件夹的文件放入,这里你可能要借助XFTP或WinSCP这类可以帮助传输文件的软件。

 重新加载Nginx配置

如果配置文件没有问题,使用以下命令重新加载Nginx配置:

systemctl reload nginx

或者,在某些系统上,你可能需要使用:

sudo service nginx reload

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分类预测 | Matlab实现KPCA-IDBO-LSSVM基于核主成分分析和改进蜣螂优化算法优化最小二乘支持向量机分类预测

分类预测 | Matlab实现KPCA-IDBO-LSSVM基于核主成分分析和改进蜣螂优化算法优化最小二乘支持向量机分类预测 目录 分类预测 | Matlab实现KPCA-IDBO-LSSVM基于核主成分分析和改进蜣螂优化算法优化最小二乘支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述…

Visual Studio C++ 正确创建项目与更改文件名

1、创建项目 1)打开Visual Studio,选择创建新项目。 2)创建空项目 3)配置新项目,注意不要勾选 " 将解决方案和项目放在同一目录中 " 。并将位置的文件夹设为与解决方案同名,方便管理。项目名称则…

《零秒思考》像麦肯锡精英一样思考 - 三余书屋 3ysw.net

零秒思考:像麦肯锡精英一样思考 大家好,今天我们要深入探讨的著作是《零秒思考》。在领导提出问题时,我们常常会陷入沉思,却依然难以有所进展,仿佛原地踏步,但是身边的同事却能够立即给出清晰的回答。这种…

乡村智慧化升级:数字乡村打造农村生活新品质

目录 一、乡村智慧化升级的内涵与意义 二、乡村智慧化升级的具体实践 1、加强农村信息基础设施建设 2、推广智慧农业应用 3、提升乡村治理智慧化水平 4、丰富智慧乡村生活内容 三、数字乡村打造农村生活新品质的成果展现 1、农业生产效率与质量双提升 2、农民收入与消…

学习Rust的第二天:Cargo

We dive into Cargo, the powerful and convenient build system and package manager for Rust. 基于Steve Klabnik的《The Rust Programming Language》一书,我们深入了解Cargo,这是Rust强大而方便的构建系统和包管理器。 Cargo is a robust and effic…

Linux文件与目录的默认权限和隐藏权限

🐇明明跟你说过:个人主页 🏅个人专栏:《Kubernetes航线图:从船长到K8s掌舵者》 🏅 🔖行路有良友,便是天堂🔖 目录 一、Linux的起源与发展 二、文件默认权限&#xf…

vitepress/vite vue3 怎么实现vue模版字符串实时编译

如果是vue模版字符串的话,先解析成模版对象 另一篇文章里有vue模版字符串解析成vue模版对象-CSDN博客 //vue3写法(vue2可以用new Vue.extend(vue模版对象)来实现)import { createApp, defineComponent } from vue;// 定义一个简单的Vue组件c…

【从浅学到熟知Linux】进程状态与进程优先级(含进程R/S/T/t/D/X/Z状态介绍、僵尸进程、孤儿进程、使用top及renice调整进程优先级)

🏠关于专栏:Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程及数据库等内容。 🎯每天努力一点点,技术变化看得见 文章目录 进程状态进程状态查看R运行状态(running)S睡眠状态(sleeping&a…

软考 系统架构设计师系列知识点之大数据设计理论与实践(2)

接前一篇文章:软考 系统架构设计师系列知识点之大数据设计理论与实践(1) 所属章节: 第19章. 大数据架构设计理论与实践 第1节 传统数据处理系统存在的问题 最严重的问题是系统并没有对认为错误进行工程设计,仅靠备份是…

[C++]让C++的opencv库支持写出h264格式视频

当我们写下面测试代码时候&#xff1a; #include <opencv2/opencv.hpp>int main() {cv::VideoCapture cap("E:\\car.mp4"); // 打开默认摄像头if (!cap.isOpened()) {std::cout << "读取完毕!" << std::endl;return -1;}double fps ca…

HarmonyOS时区和语言设置-使用相关api实现系统语言和地区设置

介绍 本示例展示了i18n&#xff0c;intl&#xff0c;resourceManager在eTS中的使用&#xff0c;使用相关api实现系统语言和地区设置、时间和时区设置&#xff0c;展示了区域格式化示例。 效果预览 使用说明 1.启动应用&#xff0c;进入应用&#xff0c;首页分为三个按钮&…

Linux第87步_阻塞IO实验

阻塞IO是“应用程序”对“驱动设备”进行操作&#xff0c;若不能获取到设备资源&#xff0c;则阻塞IO应用程序的线程会被“挂起”&#xff0c;直到获取到设备资源为止。 “挂起”就是让线程进入休眠&#xff0c;将CPU的资源让出来。线程进入休眠后&#xff0c;当设备文件可以操…

nginx配置证书和私钥进行SSL通信验证

文章目录 一、背景1.1 秘钥和证书是两个东西吗&#xff1f;1.2 介绍下nginx配置文件中参数ssl_certificate和ssl_certificate_key1.3介绍下nginx支持的证书类型1.4 目前nginx支持哪种证书格式&#xff1f;1.5 nginx修改配置文件目前方式也会有所不同1.6 介绍下不通格式的证书哪…

Vue2.x实现商城购物车

1.实现购物车页面 在页面中显示购物车中的商品信息&#xff0c;并能进行数量增减及商品删除操作&#xff0c;购物车中金额也随商品数量的变化而变化 2.创建cart.html页面 创建cart.html页面&#xff0c;在其中创建Vue实例&#xff0c;实例中首先准备一些商品信息以供显示&a…

从TensorFlow到PyTorch:我为何选择后者开启深度学习之旅

在深度学习的浪潮中&#xff0c;TensorFlow和PyTorch无疑是两大最受欢迎的框架。它们各自拥有庞大的社区支持、丰富的文档资源和强大的功能&#xff0c;使得开发者们可以根据自己的需求选择合适的工具。然而&#xff0c;在我深入研究和实践之后&#xff0c;我最终选择了PyTorch…

Day20_学点儿JavaEE_基于Session的登录、数据库null值正确显示

1 登录 使用Session技术完成用户登录的功能&#xff1a; 登录功能会使用到Session&#xff0c;把用户登录的用户名和密码保存到Session&#xff0c;因为Session是属于每个用户独有的&#xff0c;就可以记录每个用户单独的登录信息。 当然&#xff0c;这仅仅是完成了一个简单的…

NL2SQL基础系列(1):业界顶尖排行榜、权威测评数据集及LLM大模型(Spider vs BIRD)全面对比优劣分析[Text2SQL、Text2DSL]

NL2SQL基础系列(1)&#xff1a;业界顶尖排行榜、权威测评数据集及LLM大模型&#xff08;Spider vs BIRD&#xff09;全面对比优劣分析[Text2SQL、Text2DSL] Text-to-SQL&#xff08;或者Text2SQL&#xff09;&#xff0c;顾名思义就是把文本转化为SQL语言&#xff0c;更学术一…

HTML和markdown

总体情况 <p>在html的用处 在vscode中使用markdown [Markdown] 使用vscode开始Markdown写作之旅 - 知乎

开源项目one-api的k8s容器化部署(上)-- 制作镜像及部署准备

一、背景 最近需要对开源项目one-api进行k8s容器化部署&#xff0c;主要分以下几个步骤&#xff1a; 制作docker镜像申请mysql和redis数据库docker-compose部署方式k8s部署方式 整个的篇幅比较长&#xff0c;将会分成上下两篇来阐述。 二、制作docker镜像 开源项目one-api…

计算机毕业设计选题之基于SSM的旅游管理系统【源码+PPT+文档+包运行成功+部署讲解】

&#x1f493;项目咨询获取源码联系v&#x1f493;xiaowan1860&#x1f493; &#x1f6a9;如何选题&#xff1f;&#x1f351; 对于项目设计中如何选题、让题目的难度在可控范围&#xff0c;以及如何在选题过程以及整个毕设过程中如何与老师沟通&#xff0c;有疑问不清晰的可…