利用 Nginx 部署前端 Vue 项目

在这篇文章中，我们将深入探究怎样利用 Nginx 部署一个 Vue.js 前端项目。Vue 是一个流行的前端 JavaScript 框架，而 Nginx 则是一个性能卓越的 Web 服务器和反向代理服务器。通过将这两者结合起来，我们可以高效地托管我们的前端应用。
一、情况预备

在开始部署之前，我们须要确保我们的情况中已安装以下软件：

• Node.js 和 npm：用于构建 Vue 项目。
  
• Vue CLI：用于快速创建 Vue 项目。
  
• Nginx：用于托管静态文件。
  

1.1 安装 Node.js 和 npm

可以通过 Node.js 的官方网站下载最新版本的 Node.js（包括 npm）。安装完成后，利用以下命令查抄安装情况：

1. node -v
2. npm -v

复制代码

1.2 安装 Vue CLI

通过 npm 全局安装 Vue CLI：

1. npm install -g @vue/cli

复制代码

安装完成后，利用以下命令查抄安装情况：

1. vue --version

复制代码

1.3 安装 Nginx

在 Ubuntu 和 Debian 体系上，利用以下命令安装 Nginx：

1. sudo apt update
2. sudo apt install nginx

复制代码

在 CentOS 上，你可以利用以下命令安装：

1. sudo yum install epel-release
2. sudo yum install nginx

复制代码

安装后，利用以下命令启动 Nginx：

1. sudo systemctl start nginx

复制代码

二、创建 Vue 项目

接下来，我们利用 Vue CLI 创建一个新的 Vue 项目。
2.1 创建项目

通过以下命令创建一个新的 Vue 项目：

1. vue create my-vue-app

复制代码

在提示中选择你想要的配置（例如选择默认预设）。
2.2 进入项目目录

1. cd my-vue-app

复制代码

2.3 启动开发服务器

可以通过以下命令启动开发服务器，查抄项目是否正常工作：

1. npm run serve

复制代码

打开浏览器并访问 http://localhost:8080，你应该可以看到 Vue 示例项目的欢迎页面。
三、构建 Vue 项目

在接下来的步骤中，我们须要将 Vue 项目构建为可以由 Nginx 提供的静态文件。
3.1 构建项目

运行以下命令举行构建：

1. npm run build

复制代码

构建完成后，Vue 项目的生成文件将生成在 dist 文件夹中。
3.2 查看生成的文件

进入 dist 目录，你应该会看到包罗 index.html 和其他静态资源（如 CSS 和 JS 文件）的文件。

1. cd dist
2. ls

复制代码

确保文件在这里，并记住此路径，因为我们将在 Nginx 配置中利用它。
四、配置 Nginx

如今，我们须要配置 Nginx 以提供我们的 Vue 应用。
4.1 创建 Nginx 配置文件

创建一个新的 Nginx 配置文件，可以在 /etc/nginx/sites-available/ 目录下创建一个名为 my-vue-app 的文件。

1. sudo nano /etc/nginx/sites-available/my-vue-app

复制代码

将以下配置复制并粘贴到文件中：

1. server {
2. listen 80;
3. server_name yourdomain.com; # 将 "yourdomain.com" 替换为你的域名或者服务器 IP
5. location / {
6. root /path/to/your/dist; # 将此处的路径更改为 "dist" 文件夹的实际路径
7. try_files $uri $uri/ /index.html;
9. }
11. error_page 404 /404.html;
12. location = /404.html {
13. internal;
14. }
15. }

复制代码

注意：

• server_name：更换为你的域名或服务器 IP 地址。
  
• root：更换为你 dist 文件夹的绝对路径，例如 /var/www/my-vue-app/dist。
  

4.2 启用配置文件

创建一个符号链接将此配置文件链接到 sites-enabled 目录中：

1. sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/

复制代码

4.3 测试 Nginx 配置

在重新加载 Nginx 之前，建议先测试配置文件是否存在错误：

1. sudo nginx -t

复制代码

如果看到 syntax is ok 和 test is successful，那么可以重新加载 Nginx。
4.4 重新加载 Nginx

运行以下命令以重新加载 Nginx：

1. sudo systemctl reload nginx

复制代码

五、访问你的 Vue 应用

5.1 测试访问

在浏览器中访问你的域名或 IP 地址，例如 http://yourdomain.com。你应该能够看到你的 Vue 应用正常运行。
六、处置惩罚路由题目（如果利用了 Vue Router）

如果你的 Vue 应用利用了 Vue Router 的汗青模式，可能会遇到革新页面时 404 错误。为相识决这个题目，我们必须在 Nginx 配置中添加一个额外的规则。
在 location / 部分，确保有以下 try_files 行：

1. try_files $uri $uri/ /index.html;

复制代码

这将确保所有请求都回退到 index.html，从而支持 Vue Router 的汗青模式。
七、日志与题目排查

7.1 日志文件位置

Nginx 的错误日志和访问日志默认生存在以下文件中：

• 错误日志： /var/log/nginx/error.log
  
• 访问日志： /var/log/nginx/access.log
  

你可以利用以下命令查看日志：

1. tail -f /var/log/nginx/error.log
2. tail -f /var/log/nginx/access.log

复制代码

7.2 常见题目排查

1. 无法访问页面

• 查抄 Nginx 是否正在运行：sudo systemctl status nginx
  
• 查抄你的域名是否解析到服务器 IP。
  

2. 404 错误

• 确认 try_files 行的配置是否精确。
  
• 确保 Vue 应用的构建文件存在于 dist 目录下。
  

3. Nginx 配置错误

• 确认修改的配置文件（/etc/nginx/sites-available/my-vue-app）是否存在语法错误，可以运行 sudo nginx -t
   举行查找。
  

八、后续步骤

8.1 HTTPS 配置

为确保数据传输的安全性，建议为你的网站配置 HTTPS。你可以利用 Certbot 来自动为你的域名获取免费的 Let’s Encrypt 证书。
在 Ubuntu 上，可以利用以下命令安装 Certbot：

1. sudo apt install certbot python3-certbot-nginx

复制代码

然后运行以下命令获取证书：

1. sudo certbot --nginx

复制代码

依照提示完成配置。Certbot 将自动更新 Nginx 配置以利用 HTTPS。
8.2 监控与性能优化

• Nginx Worker 历程：你可以根据服务器的 CPU 核心数来调整 Nginx 的 Worker 历程数量，以优化并发处置惩罚本领。
  
• Gzip 压缩：可以启用 Gzip 压缩来淘汰文件传输巨细，提高加载速度。在 Nginx 配置文件中加入以下内容：
  

1. gzip on;
2. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

复制代码

• 缓存静态文件：在 Nginx 中配置缓存以提高性能和用户体验。
  

1. location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
2. expires 30d;
3. }

复制代码

应用以上优化可以明显提高你网站的性能和用户体验。


通过本指南，你已经成功地利用 Nginx 部署了一个 Vue.js 前端项目。你相识了怎样预备情况、创建和构建 Vue 项目、配置 Nginx 以及怎样处置惩罚路由题目和进一步优化网站。
掌握 Nginx 部署 Vue 应用的本领后，你可以将这些方法应用于其他前端框架和项目，持续改进和提拔你的网站。希望这篇文章对你有所帮助，祝你在前端开发的旅程中一帆风顺！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。