【解决方案】Vue项目部署指南：Nginx部署前端Vue.js项目

原创已于 2026-01-15 21:55:02 修改 · 6.9w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #Nginx #Vue #vue.js #部署

于 2024-09-04 09:00:40 首次发布

各种解决方案专栏收录该内容

44 篇文章

订阅专栏

目录

一、部署Vue前端项目
1.1、Nginx的下载安装与SLL配置
1.2、打包Vue项目
1.3、上传项目到Nginx目录
1.4、配置Nginx

二、Nginx命令速览

学习 Vue，我们追求的就是高效的组件化和极致的代码复用。但你有没有想过，如何将你用 Vue 掌握的这套技术栈，无缝扩展到 iOS、Android 甚至智能硬件上，并且还能兼容微信小程序生态？传统的跨端方案往往需要复杂的适配和巨大的包体积。而企业级的小程序容器技术，正在成为新的趋势。它能让你一次开发，多端运行，并且实现功能热更新，无需等待应用商店审核。如果你对如何用一套技术栈构建企业级“超级 App”感兴趣，想了解如何将你的 Vue/小程序代码能力发挥到极致，不妨点开这个链接，看看 FinClip 小程序容器是如何做到的：点击直达

在这里插入图片描述

一、部署Vue前端项目

1.1、Nginx的下载安装与SLL配置

首先查找Nginx安装的路径，查看是否安装过nginx：
输入：whereis nginx
如果显示地址，说明已经安装过nginx了。可以跳到2.2步。

如果没有安装，首先需要安装一些必要环境，在终端中依次输入以下指令，安装必要的包

yum install gcc-c++ 
yum install -y pcre pcre-devel 
yum install -y zlib zlib-devel 
yum install -y openssl openssl-devel

下载linux版本的Nginx
官网下载：https://nginx.org/en/download.html

下载稳定版本，我下的是1.22.1
在这里插入图片描述

安装包名为nginx-1.22.0.tar.gz，将其放到服务器的/usr/local/nginx目录下，初始没有nginx文件夹需要新建一个空的nginx。
安装Nginx
首先需要解压Nginx的安装包，先cd /usr/local/nginx到nginx目录，然后使用tar -zxvf nginx-1.22.1.tar.gz解压刚刚下载的安装包。
在这里插入图片描述
然后进入nginx-1.22.1文件夹的configure目录下，输入:

./configure
make
make install

在这里插入图片描述

进行安装，安装后的完整文件夹如下图所示：
在这里插入图片描述

下一步配置ssl，如果本身没有ssl模块，在安装时要安装ssl模块的nginx：./configure --prefix=/usr/local/nginx --with-http_ssl_module
make进行安装：make
输入以下cp指令：

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
cp ./objs/nginx /usr/local/nginx/sbin/

会出现是否覆盖的选项，输入y覆盖掉

最后输入whereis nginx，如果显示地址，说明已经安装过nginx了。

可能遇见的问题
如果提示说无法创建普通文件"/usr/local/nginx/sbin/nginx"，需要先暂停nginx再启动：/usr/local/nginx/sbin/nginx -s quit（或者niginx -s stop 或者killall nginx）然后再输入
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

1.2、打包Vue项目

开发完成后，在终端输入npm run build或者vite build进行打包，不同项目的打包指令和流程可能不相同，需要查看package.json的具体配置。
在这里插入图片描述
打包完成后，会生成一个dist文件夹，就是成功打包。

1.3、上传项目到Nginx目录

查找Nginx安装的路径，输入：whereis nginx，找到nginx的目录，将打包好的文件夹（即dist文件夹）上传至/usr/local/nginx/html目录下：

1.4、配置Nginx

进入nginx/conf目录，在其中找到名为nginx.conf的文件，打开，找到server部分：

端口号 listen (输入要监听的端口号，我的是5173);
域名配置 server_name (输入自己服务器的ip 例如：127.0.0.1 如果有域名可以输入域名);
前端项目存放地址 root:(打包后的vue项目文件夹例如：html/dist);

配置好后，启动Nginx，在nginx下的sbin目录下输入./nginx，既可以检查配置正常启动。

二、Nginx命令速览

./nginx -s reload // 重启nginx
./nginx // 启动nginx
./nginx -t //测试Nginx配置文件是否正确