1、开发环境
1.1、准备工作（Ubuntu 24）

系统更新 – 非必须

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），方便切换版本。

检查是否安装及安装的版本

node -v
whereis node

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

配置国内仓库

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 版本）

查看可用版本

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

配置 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 等。

vue create my-vue-app

（3）启动开发服务器

cd my-vue-app
npm run serve

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

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

构建命令

npm run build

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

2、服务器环境
2.1、部署（Nginx 方式）
（1）安装 Nginx

安装

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 站点

编辑配置文件：

cd /etc/nginx/conf.d
sudo nano vue-app.conf
一键获取完整项目代码
bash
1
2
添加以下内容：

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;

}

启用配置：

sudo nginx -t
sudo nginx -s reload

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

sudo ufw allow ‘Nginx Full’
（5）验证

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