当前位置：首页 > article >正文

使用 Nginx 部署前端 Vue.js 项目

article 2024/11/15 11:17:06

引言

Vue.js 是一个流行的前端框架，用于构建用户界面。当涉及到生产环境的部署时，选择一个合适的 web 服务器是非常重要的。Nginx 是一个高性能的 HTTP 和反向代理服务器，非常适合用来部署前端应用程序。本文将指导你如何使用 Nginx 部署一个 Vue.js 项目，并确保静态资源能够正确地被加载。

1. 准备工作

1.1 环境要求

Nginx：确保已经在你的服务器上安装了 Nginx。
Vue.js 项目：确保你的 Vue.js 项目已经构建完成，并且生成了静态文件。
服务器：拥有一台可以访问互联网的服务器，并且有权限修改 Nginx 配置文件。

1.2 构建 Vue.js 项目

首先，你需要构建你的 Vue.js 项目。使用 Vue CLI 或者其他打包工具，运行以下命令来生成静态文件：

1npm run build

构建完成后，你会得到一个 dist 目录，其中包含了所有静态资源文件。

2. 配置 Nginx

2.1 复制静态文件

将 dist 目录下的所有文件复制到 Nginx 的静态文件服务目录中。通常这个目录是 /usr/share/nginx/html 或者 /var/www/html，具体路径取决于你的操作系统和 Nginx 的安装位置。

1cp -r dist/* /usr/share/nginx/html/

2.2 编辑 Nginx 配置文件

编辑 Nginx 的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。你需要配置一个 location 块来处理 Vue.js 应用程序的路由。

以下是示例配置：

nginx

1server {
2    listen 80;
3    server_name example.com www.example.com; # 替换为你的域名
4
5    root /usr/share/nginx/html; # 静态文件所在目录
6
7    # 设置 index.html 作为默认页面
8    index index.html;
9
10    # 配置路由重写规则，使所有请求指向 index.html
11    location / {
12        try_files $uri $uri/ /index.html;
13    }
14
15    # 配置 SSL/TLS 如果需要
16    # listen 443 ssl;
17    # ssl_certificate /etc/nginx/ssl/example.com.crt;
18    # ssl_certificate_key /etc/nginx/ssl/example.com.key;
19
20    # 配置静态资源缓存
21    location ~* \.(jpg|jpeg|png|gif|js|css|ico|ttf|woff|svg)$ {
22        expires 30d;
23        add_header Cache-Control "public";
24    }
25
26    # 错误页配置
27    error_page 404 /index.html;
28
29    # 日志格式
30    access_log /var/log/nginx/example.access.log;
31    error_log  /var/log/nginx/example.error.log;
32}