OpenEuler 环境下 Vue3 项目部署到 Nginx 完整实操教程

sgx_blog

19人浏览 · 2026-07-06 08:00:00

sgx_blog · 2026-07-06 08:00:00 发布

1. 概述

在前后端分离架构中，前端项目支持独立开发、独立部署。本文基于 OpenEuler 操作系统，演示如何将 Vue3 构建生成的静态资源部署到 Nginx 中，由 Nginx 作为静态资源服务器对外提供网页访问服务。

1.1 系统环境说明

本文环境为 OpenEuler 操作系统，已通过 DNF 包管理器完成 Nginx 安装。新安装的 Nginx 在默认配置中已指定静态资源根目录，目录内预置了默认欢迎页相关文件，Nginx 启动后即可访问默认测试页面。

1.2 前置环境校验

开始部署前，请确认环境满足以下条件：

Nginx 已成功安装并处于正常运行状态。可通过 systemctl status nginx 命令查看运行状态；浏览器访问 http://localhost ，确认页面展示正常。
服务器 80 端口已在防火墙/安全组中放行，可正常访问。
Vue3 项目已完成依赖安装，可正常执行生产构建。

2. Vue3 项目生产构建

开发完成的 Vue3 项目，需要执行生产构建命令，将源码编译、压缩、打包为可直接部署的纯静态资源包，产物默认输出到项目根目录的 dist 文件夹中。

2.1 执行构建命令

进入 Vue3 项目根目录，执行构建命令：

npm run build

2.2 静态资源产物说明

构建成功后，终端会输出产物信息，项目根目录下会生成 dist 目录，这就是完整的前端部署包。

dist 目录核心结构与作用：

index.html：应用入口页面，自动引入构建后的 JS、CSS 资源
assets/：存放所有经过压缩、哈希命名的静态资源，包含业务 JS 代码、样式文件、图片等

该目录下所有文件均为纯静态资源，部署无需 Node.js 环境，可直接托管到任意 Web 服务器中。

备注：本文为本地模拟演示，项目构建与 Nginx 部署在同一台 OpenEuler 主机上，因此直接进行本机文件复制。实际生产环境中，通常通过 scp、ftp 或 CI/CD 流水线将静态资源上传至远程服务器。

3. Vue3 静态资源部署到 Nginx

部署核心逻辑：将 dist 目录内的全部文件，放入 Nginx 配置的站点根目录中，覆盖原有默认文件即可完成部署。

3.1 Nginx 站点根目录说明

OpenEuler 系统中，DNF 安装的 Nginx 默认站点根目录为：

/usr/share/nginx/html

该路径由 Nginx 主配置文件 /etc/nginx/nginx.conf 中 server 块的 root 指令指定，默认配置片段如下：

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # 其他配置...
    }

默认状态下，该目录内包含 Nginx 官方预置的欢迎页文件：

3.2 部署操作步骤

建议先清空目标目录，避免旧文件残留导致异常，再复制新的静态资源。

3.2.1 清空目标目录

由于 /usr/share/nginx/html 默认属主为 root 用户，普通用户无写入、删除权限，直接操作会触发权限报错。

现象1：图形界面操作受限

在文件管理器中选中文件后，「移至回收站」选项呈灰色，无法点击：

现象2：命令行权限报错

普通用户直接执行删除命令，会提示 Permission denied：

[developer@openeuler html]$ rm -rf /usr/share/nginx/html/*
rm: 无法删除 '/usr/share/nginx/html/404.html': Permission denied
rm: 无法删除 '/usr/share/nginx/html/50x.html': Permission denied
rm: 无法删除 '/usr/share/nginx/html/index.html': Permission denied
rm: 无法删除 '/usr/share/nginx/html/nginx-logo.png': Permission denied

解决方案：sudo 提权删除

使用 sudo 以管理员权限执行删除命令：

⚠️ 高危命令风险提示：
sudo rm -rf 为不可逆操作，执行前请务必确认路径准确，避免误删系统文件。

sudo rm -rf /usr/share/nginx/html/*

3.2.2 复制静态资源到根目录

将本地 dist 目录 内部的所有文件 复制到 Nginx 站点根目录。

待复制的 dist 目录内容如下：

执行复制命令：

sudo cp -r /home/developer/Desktop/code/hello-vue/dist/* /usr/share/nginx/html/

提示：请将命令中的源路径替换为你本地项目 dist 目录的实际路径。

参数与细节说明：

-r：递归复制，完整复制 assets 等所有子目录与内部文件
末尾的 /* 是关键：仅复制 dist 目录内部的文件，不复制 dist 文件夹本身。如果省略 /*，会把整个 dist 文件夹复制到 html 目录下，导致访问路径变为 IP/dist/index.html，不符合预期。

执行命令无报错即复制成功：