在 CentOS 上部署 Vue 3 项目可以分为以下几个步骤:
-
安装 Node.js 和 npm:
Vue.js 是一个基于 Node.js 的框架,所以首先需要安装 Node.js 和 npm。# 安装 EPEL 仓库 sudo yum install epel-release # 安装 Node.js sudo yum install nodejs # 检查安装是否成功 node -v npm -v
-
创建 Vue 3 项目:
如果还没有创建 Vue 3 项目,可以使用 Vue CLI 来创建一个新项目。# 安装 Vue CLI npm install -g @vue/cli # 创建一个新的 Vue 3 项目 vue create my-vue-app # 进入项目目录 cd my-vue-app
-
构建项目:
在生产环境中,通常需要构建项目以生成静态文件。npm run build
这会在项目目录中生成一个
dist
文件夹,其中包含所有的静态文件。 -
安装和配置 Nginx:
使用 Nginx 来托管构建后的静态文件。# 安装 Nginx sudo yum install nginx # 启动 Nginx sudo systemctl start nginx # 设置 Nginx 开机自启 sudo systemctl enable nginx
-
配置 Nginx:
编辑 Nginx 配置文件,将其指向 Vue 项目的dist
目录。sudo vi /etc/nginx/conf.d/vue.conf
添加以下内容:
server { listen 80; server_name your_domain_or_ip; location / { root /path/to/your/vue-app/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }
将
/path/to/your/vue-app/dist
替换为实际的dist
目录路径。
比如:
server {
listen 7078;
server_name 139.196.77.231;
location / {
root /changyou/develop/MFBlog/blog-view/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
-
重启 Nginx:
保存配置文件后,重启 Nginx 使配置生效。sudo systemctl restart nginx
-
防火墙设置(如果需要):
确保防火墙允许 HTTP 流量。sudo firewall-cmd --permanent --zone=public --add-service=http sudo firewall-cmd --reload
完成以上步骤后,您应该能够通过浏览器访问您的 Vue 3 项目。