Nginx打包部署前端Vue项目全过程（保姆级教程）
1. 前言
Vue.js 是一个流行的前端框架，可用于构建高效、动态的Web应用。而 Nginx 是一种高性能的Web服务器，通常用于静态文件的托管和反向代理。本文将为你呈现如何通过 Nginx 来部署一个 Vue.js 项目，让我们一步一步来。
2. 环境准备
在开始之前，请确保你已经安装了以下环境：
- Node.js 和 npm（用于构建 Vue 项目）
- Vue CLI（用于创建和管理 Vue 项目）
- Nginx（用于部署和托管项目）
可以使用以下命令来安装 Vue CLI：
npm install -g @vue/cli
3. 创建 Vue 项目
首先，我们创建一个新的 Vue 项目。在终端中执行以下命令：
vue create my-vue-app
根据提示选择默认的配置，等待项目创建完成。
4. 构建项目
进入到项目目录并进行构建：
cd my-vue-app
npm run build
构建完成后，会在项目根目录下生成一个 dist 文件夹，该文件夹中包含了所有静态文件，这些文件准备好可以被部署。
5. 安装并配置 Nginx
如果你的系统中还没有安装 Nginx，可以使用以下命令进行安装（以 Ubuntu 为例）：
sudo apt update
sudo apt install nginx
然后，你需要配置 Nginx，以便它可以服务于你的 Vue 应用。打开 Nginx 的配置文件：
sudo nano /etc/nginx/sites-available/default
将原有的配置替换为以下内容：
server {
listen 80; # 听80端口
server_name your_domain_or_IP; # 替换为你的域名或IP
location / {
root /var/www/my-vue-app/dist; # 指向你构建的Vue项目的dist目录
index index.html index.htm;
try_files $uri $uri/ /index.html; # Vue路由配置
}
location ~ \.ico$ {
access_log off; # 不记录日志
log_not_found off;
}
location ~ \.css$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
location ~ \.js$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
}
6. 将构建文件复制到 Nginx 目录
在 nginx 配置中，我们指定了 root 路径，现在需要将构建的静态文件复制到这个路径。可以使用以下命令：
sudo mkdir -p /var/www/my-vue-app
sudo cp -r dist/* /var/www/my-vue-app
7. 测试 Nginx 配置
在修改完 Nginx 配置文件后，需要测试配置是否正确，使用以下命令：
sudo nginx -t
如果没有错误信息，重启 Nginx 服务使配置生效：
sudo systemctl restart nginx
8. 访问你的 Vue 应用
现在，你应该可以通过浏览器输入你的域名或服务器 IP 地址来访问你的 Vue 应用了。如果一切顺利，你将看到 Vue 应用的主页。
9. 总结
到此为止，我们完成了将 Vue.js 项目打包并通过 Nginx 部署的全过程。这个过程中包括创建 Vue 项目、构建项目、安装 Nginx、配置 Nginx，以及将静态文件部署到服务器上。希望这个教程能帮助到你，享受你的前端开发旅程吧！
