从零开始：如何用Nginx部署全段Vue项目

2025/2/23 14:15:17 来源：https://blog.csdn.net/weixin_42132035/article/details/141789456 浏览: 次关键词：从零开始：如何用Nginx部署全段Vue项目

在现代Web开发中，Vue.js已经成为一种流行的前端框架，广泛应用于各类项目中。将Vue项目部署到生产环境中是每位开发者必经之路，而Nginx作为一款高性能的Web服务器，成为了许多开发者的首选。本文将详细介绍如何使用Nginx部署全段Vue项目，确保你的应用能够在生产环境中平稳运行。

一、环境准备

在开始之前，确保你已经安装了以下环境：

Node.js：用于构建Vue项目。
Nginx：用于托管和服务静态文件。

1. 安装Node.js

可以通过以下命令在Linux系统上安装Node.js：

sudo apt update
sudo apt install nodejs npm

2. 安装Nginx

在Ubuntu上安装Nginx的命令如下：

sudo apt update
sudo apt install nginx

二、创建和构建Vue项目

如果你还没有创建Vue项目，可以使用Vue CLI来创建一个新的项目。

1. 安装Vue CLI

npm install -g @vue/cli

2. 创建Vue项目

vue create my-vue-project

在创建过程中，选择适合你的配置。

3. 构建项目

进入项目目录并构建项目：

cd my-vue-project
npm run build

构建完成后，生成的静态文件会存放在dist目录下。

三、配置Nginx

接下来，我们需要配置Nginx来服务这些静态文件。

1. 进入Nginx配置目录

Nginx的默认配置文件路径通常为/etc/nginx/sites-available/default。

sudo nano /etc/nginx/sites-available/default

2. 修改配置文件

在配置文件中，找到server块并进行如下修改：

nginx

server {listen 80;server_name your_domain.com;  # 替换为你的域名或IP地址location / {root /path/to/your/my-vue-project/dist;  # 替换为你的dist目录路径index index.html index.htm;# 处理HTML5 History模式try_files $uri $uri/ /index.html;}error_page 404 /404.html;  # 自定义404页面location = /404.html {internal;}
}

3. 检查Nginx配置

在保存并退出编辑器后，检查Nginx配置是否正确：

sudo nginx -t

4. 重启Nginx

如果配置没有错误，重启Nginx以应用更改：

sudo systemctl restart nginx

四、访问你的Vue应用

现在，你可以通过浏览器访问你配置的域名或IP地址，应该能够看到你的Vue应用成功运行。

五、常见问题及解决方案

1. 404错误

如果你在访问Vue应用时遇到404错误，可能是因为Nginx没有正确处理路由。确保在nginx.conf中添加了try_files $uri $uri/ /index.html;这一行。

2. CORS问题

如果你的Vue应用需要访问API，可能会遇到跨域问题。可以在Nginx配置中添加以下内容：

nginx

location /api {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';if ($request_method = 'OPTIONS') {return 204;}
}