将 Vue 项目部署到 Nginx 上

将 Vue 项目部署到 Nginx 上

安装 Nginx

下载地址：nginx: download

（1）因为我在 Windows 系统下安装 Nginx，所以选择 nginx/Windows-1.22.1。下载的资源是一个压缩包，解压后即可使用。

（2）打开命令行提示符（cmd），切换到 Nginx 的根目录，启动 Nginx 服务器。

cd /D D:/software/nginx-1.22.1

start nginx.exe

（3）访问 http://localhost/，如果出现 Nginx 的欢迎界面则表示服务器正常运行。

（4）其他一些常用的 Nginx 指令。

# 强制关闭
nginx -s stop
# 优雅关闭
nginx -s quit
# 重启
nginx -s reload

打包项目

默认情况下，Vue 项目的打包指令如下：

npm run build

指令执行成功后，将会在当前项目目录下，生成一个 dist 文件夹。

将项目部署到 Nginx 上

将 dist 文件夹放在 Nginx 的 html 目录下，然后打开 conf/nginx.conf 文件，修改

server {
    ...
    location / {
        root   html/dist;
        index  index.html index.htm;
    }
    ...
}

重启服务器。

nginx.exe -s reload