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

OpenEuler 等 Linux 系统中运行 Vue 项目的方法

news 2025/8/17 5:47:21

在 OpenEuler 等 Linux 系统中运行 Vue 项目，通常需要经过环境准备、项目部署、启动服务三个步骤。以下是详细操作指南：

一、准备运行环境

Vue 项目依赖 Node.js（包含 npm 包管理器），需先安装：

1. 安装 Node.js 和 npm

方法 1：通过系统包管理器（推荐，适合 OpenEuler）
OpenEuler 的软件源中可能包含 Node.js，直接安装：

# 查看可用可用版本
sudo dnf search nodejs# 安装（以Node.js 16为例，可根据项目需求选择版本）
sudo dnf install -y nodejs-16.x86_64  # 具体版本号以搜索结果为准# 验证安装
node -v  # 输出Node.js版本，如v16.20.2
npm -v   # 输出npm版本，如8.19.4

方法 2：通过 NodeSource 安装（适合需要特定版本）
若系统源版本不符，可使用 NodeSource 脚本安装：

# 安装Node.js 18（其他版本替换数字即可）
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo dnf install -y nodejs  # OpenEuler使用dnf，Ubuntu用apt

二、获取 Vue 项目代码

克隆项目（若使用 Git）

git clone <项目仓库地址>
cd <项目目录>  # 进入项目文件夹

或上传本地项目
通过scp或 FTP 工具将本地 Vue 项目文件夹上传到 Linux 服务器，例如：
```
scp -r /本地项目路径 user@服务器IP:/目标路径
cd /目标路径/项目文件夹
```

三、安装项目依赖

进入项目目录后，安装package.json中定义的依赖：

# 安装依赖（使用npm）
npm install# 若依赖安装缓慢，可切换淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm install

若出现依赖冲突（如peer dependency错误），可尝试：

npm install --force  # 强制安装（谨慎使用，可能引发兼容性问题）
# 或使用yarn（需先安装yarn：npm install -g yarn）
yarn install

四、运行 Vue 项目

根据项目配置，选择以下方式启动：

1. 开发环境运行（`npm run serve`）

适合开发阶段，启动带热更新的开发服务器：

# 启动开发服务（默认端口8080）
npm run serve

输出类似：App running at: http://localhost:8080/

若需外部访问（如从本地浏览器访问服务器上的项目），需修改vue.config.js配置允许跨域和指定主机：

// 在项目根目录的vue.config.js中添加
module.exports = {devServer: {host: '0.0.0.0',  // 允许所有IP访问port: 8080,       // 端口（可自定义）disableHostCheck: true  // 关闭主机检查（避免跨域问题）}
}

重启服务后，通过服务器IP:8080访问。

2. 生产环境部署（构建 + 静态服务）

适合正式上线，先构建静态文件，再用 Web 服务器（如 Nginx）运行：

步骤 1：构建静态文件

# 生成dist文件夹（包含HTML/CSS/JS等静态资源）
npm run build

构建成功后，项目根目录会生成dist文件夹。

步骤 2：用 Nginx 部署静态文件

安装 Nginx：

sudo dnf install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx  # 设置开机启动

配置 Nginx：

# 创建项目配置文件
sudo vi /etc/nginx/conf.d/vue-project.conf

添加以下内容（替换/path/to/your/project/dist为实际dist文件夹路径）：

server {listen 80;  # 访问端口server_name localhost;  # 服务器IP或域名root /path/to/your/project/dist;  # 静态文件目录index index.html;# 处理Vue路由（避免刷新404）location / {try_files $uri $uri/ /index.html;}
}

验证配置并重启 Nginx：

sudo nginx -t  # 检查配置是否有误
sudo systemctl restart nginx

访问项目：
在浏览器中输入服务器IP（或配置的域名），即可访问生产环境的 Vue 项目。

五、常见问题解决

端口被占用：
开发环境启动时若提示EADDRINUSE: address already in use :::8080，需释放端口：
```
# 查找占用8080端口的进程
netstat -tuln | grep 8080
# 杀死进程（替换PID）
kill -9 <PID>
```
权限问题：
安装依赖时若提示Permission denied，避免使用root用户，或添加--unsafe-perm：
```
npm install --unsafe-perm
```

防火墙阻断端口：
若无法访问 8080 或 80 端口，开放端口：

# 开放8080端口（开发环境）
sudo firewall-cmd --add-port=8080/tcp --permanent
# 开放80端口（生产环境Nginx）
sudo firewall-cmd --add-port=80/tcp --permanent
# 刷新配置
sudo firewall-cmd --reload