在云主机上进行电商项目VUE前端部署

1 概述

1.1 适用对象

• 企业
• 个人开发者
• 高校学生

1.2 案例时间

本案例总时长预计30分钟。

1.3 案例流程

{{{width="33%" height="auto"}}} 说明： ① 用户登陆云主机； ② 进行环境配置和Git配置； ③ 从Gitcode拉取项目代码到云主机； ④ 启动前端Vue服务，通过浏览器访问前端页面。

1.4 资源总览

本案例预计花费总计0元。 |资源名称| 规格| 单价（元）| 时长（分钟）| |-|-|-|-| |云主机| 2vCPUs 4GB| 免费| 30|

2 搭建开发环境并启动前端项目

2.1 登录云主机

点击开发者空间进入到个人空间主页。 在开发者空间->我的云主机->我的云主机（beta体验）卡片，点击“进入桌面”按钮，进入云主机界面。

2.2 环境配置

1. 打开“终端”，通过命令行更新软件包。

sudo apt update
sudo apt upgrade

1. 查看node版本

node -v

注：node.js版本要大于14.8.0，如果版本过低会启动报错，需升级版本。

1. （可选）升级node.js版本 参考链接：https://nodejs.org/zh-cn/download/package-manager
2. 安装 nvm (Node 版本管理器)

sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

注：下载过程可能会遇到下载过慢，无法连接到github等问题，可Ctrl+C停止本次操作，然后重试； - 查看nvm是否生效，根据提示，让nvm生效（运行提示代码或者重启终端后运行命令）

source ~/.bashrc
nvm –v
num

- 下载并安装 Node.js（可能需要重启终端），并查看node.js版本和npm版本：

nvm install 22
node -v # 应该打印 `v22.12.0    `
npm -v # 应该打印 `10.9.0`

2.3 Git配置

1. 在终端中，依次执行命令（注：请使用自己的邮箱和自己的别名）进行git别名配置：

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

1. 查看是否生效

git config user.name
git config user.email

2.4 拉取代码

1. 执行命令，切换到你的代码文件夹（自定义，此处的命令为示例，请替换为自己的目录），创建并进入代码目录：

cd /home/developer/Downloads/
mkdir MyCode
cd MyCode/

1. 执行git clone命令，拉取Vue前端代码：

git clone https://gitcode.com/CaseDeveloper/E-Commerce-Web.git

2.5 启动前端Vue服务

1. 进入代码目录，执行命令：

cd /home/developer/MyCode/E-Commerce-Web

1. 拉取项目依赖：

npm install

3. 启动项目（开发态部署）

npm run dev

4. 打开浏览器，输入http://localhost:3000 访问API文档页面。 5. （可选）打包命令，将代码打包成静态文件用于部署到服务器：

npm run build

至此，在云主机上进行电商项目VUE前端部署全部完成。