前端必学：💻Mac + Nginx 部署 Vue3 静态项目

基础版

前言

最近空闲时间比较多，想着提升提升自己，想到了关于部署方面的东西自己还完全不懂，于是决定学习下部署相关的知识，经过几天的摸索，入门了nginx部署前端静态文件部署，还入门了通过Vercel + Railway部署前后端项目线上地址，代码是通过react19 + express + mysql2实现的，这篇先记录一下nginx静态部署。

安装

第一步是要安装 Nginx，我是Mac环境，通常使用 Homebrew 安装这些工具，没有Homebrew可以到官网先安装，然后执行nginx安装命令。

bash 复制代码

brew install nginx

安装之后，查看安装路径，默认路径如下

bash 复制代码

/usr/local/etc/nginx/nginx.conf

可以打开Finder确认，按Shift+command+g输入/usr查找nginx.conf

处理dist文件

把dist文件放在/usr/local/var/www下边，在www下新建一个文件夹，起一个你喜欢的名字，例如我起了一个app3，然后把 dist 里边的文件都放到app3下边。

修改nginx.conf

接下来进入关键部分nginx配置的修改，nginx.conf 可以通过文稿打开修改，也可以在终端执行nano /usr/local/etc/nginx/nginx.conf命令打开修改，修改server部分内容，# 注释的部分不用写，仅仅是为了解释单行配置的作用。

conf 复制代码

server {
     # 监听的端口
     listen       8080;
     # 域名
     server_name  localhost;

     location / {
        # 拼接路径
        root   /usr/local/var/www/app3;
        # 默认返回的文件
        index   index.html;
        # 匹配所有.js或.mjs文件，添加请求头
        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

执行

在终端输入并回车执行nginx，启动 nginx，然后访问 http://localhost:8080 ，就能看到你的静态项目成功部署了

bash 复制代码

nginx

进阶版

上文是一个基础版 nginx 配置，实际上我们当然不是只有一个项目需要部署，下边聊一下遇到多个项目部署，或者项目配置了publicPath（Vue CLI）或 base (Vite)的情况下，如何修改 nginx.conf 配置.

创建目录存放多站点配置

首先创建俩文件夹，一个用来放所有的.conf配置文件，另一个用来存放当前启用的站点。

bash 复制代码

mkdir -p /usr/local/etc/nginx/sites-available
mkdir -p /usr/local/etc/nginx/sites-enabled

sites-available：所有的配置
sites-enabled：启用的配置

修改主配置文件

引入sites-enabled

js 复制代码

#user  nobody;
worker_processes  1;

error_log  /usr/local/var/log/nginx/error.log;
pid        /usr/local/var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    access_log  /usr/local/var/log/nginx/access.log;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    # Nginx 启动时会自动加载 `sites-enabled` 中的所有配置文件。
    include /usr/local/etc/nginx/sites-enabled/*;
}

添加第一个配置文件

在 sites-available 下新建一个 vue-app1.conf 文件

base 复制代码

server {
     listen       8080;
     server_name  vue-app1.local;

     location / {
        root    /usr/local/var/www/app1;
        index   index.html;

        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

启用站点

base 复制代码

ln -sf ../sites-available/vue-app1.conf /usr/local/etc/nginx/sites-enabled/

处理dist

把dist文件放在/usr/local/var/www下边的app1目录

修改hosts文件

为了让vue-app1.local可以访问，需要增加域名映射

bash 复制代码

sudo nano /etc/hosts

# 添加
127.0.0.1 vue-app1.local

保存之后执行以下两条命令

bash 复制代码

# 刷新DNS缓存
sudo killall -HUP mDNSResponder

bash 复制代码

#重启nginx

sudo killall -HUP mDNSResponder

访问

vue-app1.local:8080

添加第二个配置文件

在 sites-available 下新建一个 vue-app2.conf 文件，例如这个文件需要部署的前端项目存在基本 URL，并且 router 类型是 createWebHistory ，例如本地启动时，地址是 http://localhost:8080/czsc/ ，这个czsc就是基本 URL，这时候的 vue-app2.conf 文件就需要如下配置

js 复制代码

server {
     listen       8080;
     server_name  vue-app2.local;

     location /czsc/ {
        # 别名，替换匹配的路径部分
        alias   /usr/local/var/www/app2/;
        index   index.html;
        # 支持 Vue Router 的 `history` 模式
        try_files $uri $uri/ /czsc/index.html;

        location ~ \.(js|mjs)$ {
            add_header 'Content-Type' 'application/javascript';
        }
     }
}

之后的步骤就和第一个配置文件一样了，尝试一下吧

访问

vue-app2.local:8080/czsc