Liunx（CentOS-6-x86_64）使用Nginx部署Vue项目

一：编译vue项目和上传到linux系统

通过本地编译器编译后的文件

上传服务器后的

二：安装 node（版本 v16.20.2）和npm（ 8.19.4或 9.6.5）

备注一：安装nodejs就是安装node和npm，

sudo yum install -y nodejs

检测node安装是否成功

node -v

检测npm 是否成功

npm -v

2.1：node安装失败解决方法（成功跳过）

注意：在使用sudo yum install -y nodejs时显示下方的内容时使用，如果正常安装则无需使用该命令

已加载插件：fastestmirror Loading mirror speeds from cached hostfile 没有可用软件包

nodejs。 错误：无须任何处理

解决方法：添加 Node.js 官方仓库

curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -

2.2：npm安装失败解决方法（成功跳过）

为什么要安装9.6.5版本？因为最新版的npm与nodeV16版本不相容。

解决方法：

#  配置npm安装库
curl -L https://www.npmjs.com/install.sh | sudo sh

#  使用npm命令安装9.6.5版本的npm
npm install -g [email protected]

三：安装 Yarn（1.22.22）

npm install -g yarn

检测yarn安装是否成功

yarn -v

四：安装nginx

sudo yum install -y nginx

检测nginx安装是否成功

nginx -v

4.1：安装nginx错误 nginx报没有安装包 （安装epel-release完成后再去 安装nginx ）

注意如果按照nginx时报没有安装包，是因为没有这个epel-release库，需要安装它，也可以使用命令 rpm -qi epel-release 查看系统中的epel-release是否有

# 安装epel-release
sudo yum install epel-release

# 查看系统中的epel-release是否有安装epel-release
rpm -qi epel-release

五：编辑Nginx配置文件

server {
    listen 80;
    server_name _;

    location / {
           root /weike/tian/tvue; #vue项目路径
           index index.html; #编译好的index.htlm文件
           try_files $uri $uri/ /index.html;
    }
	# 代理 API 请求 下面这两个请求是因为
        #在 vue.config.js 中，代理配置只会在开发环境下生效（通过 npm run serve 启动时）。在生产环境下（通过 Nginx 部署时），代理配置不会生效。
        # Nginx 配置，添加 API 代理在 Nginx 配置中添加对 /wxapi.php/ 和 /upload/ 的代理规则，将请求转发到 https://www.com/  (后台路径)

        location /wxapi.php/ {
             proxy_pass https://www.com;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
        }
        location /upload/ {
             proxy_pass https://www.com; 
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
        }

}

六：启动Nginx

# 启动 Nginx:
sudo systemctl start nginx

# 设置 Nginx 开机自启动:
sudo systemctl enable nginx

# 检查 Nginx 的状态：
sudo systemctl status nginx

以下内容代表启动成功

● nginx.service - The nginx HTTP and reverse proxy server

Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)

Active: active (running) since 一 2025-03-10 10:58:00 CST; 36min ago

Process: 18318 ExecReload=/usr/sbin/nginx -s reload (code=exited, status=0/SUCCESS)

Main PID: 7800 (nginx)

CGroup: /system.slice/nginx.service

├─ 7800 nginx: master process /usr/sbin/nginx

├─18319 nginx: worker process

├─18320 nginx: worker process

├─18321 nginx: worker process

└─18322 nginx: worker process

3月 10 10:58:00 localhost.localdomain systemd[1]: Starting The nginx HTTP an...

3月 10 10:58:00 localhost.localdomain nginx[7795]: nginx: the configuration ...

3月 10 10:58:00 localhost.localdomain nginx[7795]: nginx: configuration file...

3月 10 10:58:00 localhost.localdomain systemd[1]: Started The nginx HTTP and...

3月 10 11:03:26 localhost.localdomain systemd[1]: Reloading The nginx HTTP a...

3月 10 11:03:26 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an...

3月 10 11:16:02 localhost.localdomain systemd[1]: Reloading The nginx HTTP a...

3月 10 11:16:02 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an...

3月 10 11:25:18 localhost.localdomain systemd[1]: Reloading The nginx HTTP a...

3月 10 11:25:18 localhost.localdomain systemd[1]: Reloaded The nginx HTTP an...

Hint: Some lines were ellipsized, use -l to show in full.

如果修改了配置文件，可以使用以下命令重新加载 Nginx，而不会中断当前连接

sudo systemctl reload nginx

注：是以上方法安装的nginx直接忽略

# 另一种安装方式的重启
/weike/nginx/sbin/nginx -p /weike/nginx/ -s reload

七：打开Vue项目路径和文件权限。

检查 Vue 项目路径：

确保 /weike/tian/tvue 路径下包含 Vue 项目的文件（如 index.html 和 static 目录）。

# 给nginx提供权限
sudo chown -R nginx:nginx /weike/tian/tvue
sudo chmod -R 755 /weike/tian/tvue

// 检测权限

ls -l /weike/tian/tvue

输出示例： drwxr-xr-x 2 nginx nginx 4096 Mar 10 10:00 static

-rwxr-xr-x 1 nginx nginx 1234 Mar 10 10:00 index.html

八：打开防火墙

# 检查防火墙状态
sudo firewall-cmd --state

# 查看当前开放的端口
sudo firewall-cmd --list-all

# 开放 HTTP 端口（80）
sudo firewall-cmd --add-service=http --permanent

# 重新加载防火墙规则
sudo firewall-cmd --reload

#验证端口是否开放：确保输出中包含 http。
sudo firewall-cmd --list-services

九：访问vue项目 输入ip即可访问到默认的初始页面；

获取liunx的IP地址

ip addr show

9.1：如果出现 无法访问此网站 错误

# 检查 SELinux 状态：如果输出中 Current mode 为 enforcing，说明 SELinux 已启用。
sestatus

# 临时禁用 SELinux：
sudo setenforce 0

9.2：永久关闭 SELinux

永久关闭 SELinux 需要修改配置文件，重启系统后生效。

# 修改/etc/selinux/config
SELINUX=enforcing
将其改为：
SELINUX=disabled

重启系统

sudo reboot

重启后，检查 SELinux 状态

sestatus

如果 SELinux status 为 disabled，说明 SELinux 已永久关闭。

输出示例： SELinux status: disabled

十：总结备注

1：使用nginx代理静态文件，在本地添加新的组件时无需对服务器的vue项目进行添加，本地编译成静态文件时就已经将起加入到静态文件了。