Linux服务器nginx部署Vue前端(详细版)

提示:适用于前后端项目的部署

文章目录


前言

搜索到这篇文章想必你已经对Nginx比较了解,我也不对Nginx进行介绍赘述了,只需要明白Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器。下面我将直接介绍如何在Nginx部署前端文件的整个流程。


一、打包前端文件

打包前端文件,打开前端包管理器,使用

bash 复制代码
npm run build 

打包该项目,打包完成可以发现项目中多了个dist文件夹

二、下载和部署Nginx

这一步可以参考我之前写的点击这里

三、配置conf文件

这一步是重中之重,打开winscp,当然你有更好的也行(只要支持SSH的SFTP文件传输),人话就是能够支持文件上传服务器或编辑服务器文件内容,打开nginx目录下的conf文件夹找到,nginx.conf文件,双击打开。

bash 复制代码
server {
        listen       80;#nginx监听端口
        server_name  localhost;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

在原有基础上http { } 内容中加入上述内容。注意这些都要一 一对应,举个例子需求是在190.21.3.1服务器40端口部署前端,前端文件放在home文件下

bash 复制代码
server {
        listen       40;#nginx监听端口
        server_name  190.21.3.1;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

注意把前端打包后的dist放到root中路径指定文件夹下。

启动nginx

bash 复制代码
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

启动nginx即可,如果nginx已经启动可参考我上面的文章,先关闭再启动,或直接使用重启指令即可。

相关推荐
꧁坚持很酷꧂31 分钟前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
凉、介1 小时前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci
电鱼智能的电小鱼1 小时前
EFISH-SBC-RK3588无人机地面基准站项目
linux·网络·嵌入式硬件·机器人·无人机·边缘计算
电鱼智能的电小鱼1 小时前
基于 EFISH-SBC-RK3588 的无人机环境感知与数据采集方案
linux·网络·嵌入式硬件·数码相机·无人机·边缘计算
小诸葛的博客2 小时前
详解Linux中的定时任务管理工具crond
linux·运维·chrome
一默19912 小时前
CentOS 7.9升级OpenSSH到9.9p2
linux·运维·centos
keep intensify2 小时前
Linux常用指令
linux·服务器·php
带电的小王3 小时前
sherpa-ncnn:Linux(x86/ARM32/ARM64)构建sherpa-ncnn --语音转文本大模型
linux·语音识别·实时音视频·sherpa-ncnn
沧浪之水!3 小时前
【Linux网络】:套接字之UDP
linux·网络·udp
BranH3 小时前
Linux系统中命令设定临时IP
linux·运维·服务器