Ubuntu 24.04 LTS 下 Vue 3 开发环境搭建与生产部署完整指南

本文基于 Ubuntu 24.04 LTS，详细介绍从 0 开始搭建 Vue 开发环境、项目打包以及生产服务器部署的完整流程，适合前端新手和全栈开发者参考。

文章目录

环境说明
1、开发环境
- [1.1、准备工作（Ubuntu 24）](#1.1、准备工作（Ubuntu 24）)
- [1.2、安装 Node.js（推荐 NVM 方式）](#1.2、安装 Node.js（推荐 NVM 方式）)
- - [1.2.1、安装 NVM](#1.2.1、安装 NVM)
  - [1.2.2、安装 Node.js（示例：LTS 版本）](#1.2.2、安装 Node.js（示例：LTS 版本）)
  - 1.2.3、其他
- 1.3、IDE
- 1.4、Demo
- - [1.4.1、安装 Vue CLI 与创建项目](#1.4.1、安装 Vue CLI 与创建项目)
2、服务器环境
- [2.1、部署（Nginx 方式）](#2.1、部署（Nginx 方式）)
总结

环境说明

操作系统：Ubuntu 24.04.1 LTS

nvm 版本：0.39.5

node 版本：v24.11.1

npm 版本：11.6.2

Nginx 版本：1.24.0 (Ubuntu)

Visual Studio Code 版本：1.106.1

说明：Ubuntu 24 常用命令可参考 https://blog.csdn.net/achi010/article/details/145224136

1、开发环境

1.1、准备工作（Ubuntu 24）

bash 复制代码

# 系统更新 - 非必须
sudo apt update && sudo apt upgrade -y
# 安装基础工具
sudo apt install -y curl git build-essential

1.2、安装 Node.js（推荐 NVM 方式）

虽然 Ubuntu 24 自带 Node.js，但版本可能偏旧。推荐使用 NVM（Node Version Manager），方便切换版本。

shell 复制代码

# 检查是否安装及安装的版本
node -v
whereis node

1.2.1、安装 NVM

bash 复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
source ~/.bashrc

shell 复制代码

# 配置国内仓库
echo 'export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node' >> ~/.bashrc
source ~/.bashrc
# 验证是否生效
echo $NVM_NODEJS_ORG_MIRROR

说明：阿里云镜像地址为 https://mirrors.aliyun.com/nodejs-release/

1.2.2、安装 Node.js（示例：LTS 版本）

bash 复制代码

# 查看可用版本
nvm list available
# 安装 LTS 版本
nvm install --lts
nvm use --lts

# 验证
node -v
npm -v

1.2.3、其他

nrm、yarn 管理可参考《Windows 开发 Vue.js 项目的环境准备》

1.3、IDE

（1）安装

方法一：通过"应用中心"安装，版本 latest （当前 1.105.1 ）

方法二：官网下载 code_1.105.1-1760482543_amd64.deb 文件，手动安装，版本任选

（2）插件

Vue 开发推荐插件（Vue 3 推荐）

注意：Vue 2 已于 2023 年底停止维护，新项目建议使用 Vue 3 + Volar 插件。

以下内容为 Markdown 表格格式，可直接复制使用：

插件名称	功能说明
Vue (Official)	Vue 3 官方插件，支持语法高亮、类型检查、模板补全、Composition API 支持等。必须安装。
Vue VSCode Snippets	快速生成 Vue 模板代码（如 `vbase` → 基础组件结构）。
Vue 3 Snippets	提供 Vue 3 和 Composition API 的代码片段。
ESLint	检查 JavaScript/TypeScript/Vue 代码规范，提升代码质量。
Prettier - Code formatter	自动格式化代码，统一代码风格。
Auto Rename Tag	修改 HTML/XML 标签时自动同步闭合标签。
Path Intellisense	自动补全文件路径，方便引入组件或模块。
npm Intellisense	自动补全 `import` 时的 npm 包名。
Live Server（可选）	本地快速预览静态页面，适合调试 Vue 页面（但不适用于 Vite 项目）。
Vue Peek	快速跳转到 Vue 组件定义处，方便组件导航。

通用插件（前后端通用）

插件名称	功能说明
GitLens	强大的 Git 集成工具，查看提交历史、代码作者等。
Material Icon Theme	美化文件图标，提升项目结构可读性。
One Dark Pro	流行的暗色主题，护眼舒适。

1.4、Demo

1.4.1、安装 Vue CLI 与创建项目

（1）全局安装 Vue CLI

bash 复制代码

# 配置 npm 镜像源
# 设置为淘宝镜像（推荐）
npm config set registry https://registry.npmmirror.com/
# 验证 npm 镜像配置
npm config get registry

# 全局安装 Vue CLI
npm install -g @vue/cli

（2）创建 Vue 项目（以 Vue 3 为例）

说明：选择默认 Vue 3 配置即可，或手动选择 Router、Vuex、ESLint 等。

bash 复制代码

vue create my-vue-app

（3）启动开发服务器

bash 复制代码

cd my-vue-app
npm run serve

访问 http://localhost:8080 即可看到 Vue 欢迎页面。

（4）项目打包（构建生产版本）

构建命令

bash 复制代码

npm run build

构建完成后，会生成一个 dist/ 目录，里面是静态资源文件（HTML、CSS、JS、图片等）。

2、服务器环境

2.1、部署（Nginx 方式）

（1）安装 Nginx

bash 复制代码

# 安装
sudo apt install nginx -y
# 验证及版本查看
sudo nginx -t
sudo nginx -version
# 可通过浏览器访问 http://server_ip 看到 Nginx 欢迎页即代表部署成功

说明：也可按照 Nginx 官方文档：http://nginx.org/en/linux_packages.html#Ubuntu 进行安装。

（2）上传 dist 文件到服务器，目录 /var/www/vue-app

（3）配置 Nginx 站点

编辑配置文件：

bash 复制代码

cd /etc/nginx/conf.d
sudo nano vue-app.conf

添加以下内容：

yaml 复制代码

server {
    listen 10002;
    server_name localhost;

    root /var/www/vue-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：开启 Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

启用配置：

bash 复制代码

sudo nginx -t
sudo nginx -s reload

（4）开放防火墙（如有）

bash 复制代码

sudo ufw allow 'Nginx Full'

（5）验证

浏览器访问 http://server_ip:10002/ 可以看到 Vue 欢迎页面。

总结

本文系统性地梳理了在 Ubuntu 24.04 LTS 上构建 Vue 3 现代化开发环境的完整链路，从环境准备、Node.js 管理、项目创建到最终生产部署，形成了一套标准化、可复用的工作流程。