在 CentOS 上部署 Vue 3 项目

在 CentOS 上部署 Vue 3 项目可以分为以下几个步骤：

1. 安装 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
   

2. 创建 Vue 3 项目：
   如果还没有创建 Vue 3 项目，可以使用 Vue CLI 来创建一个新项目。

   # 安装 Vue CLI
   npm install -g @vue/cli
   
   # 创建一个新的 Vue 3 项目
   vue create my-vue-app
   
   # 进入项目目录
   cd my-vue-app
   

3. 构建项目：
   在生产环境中，通常需要构建项目以生成静态文件。

   npm run build
   

   这会在项目目录中生成一个 dist 文件夹，其中包含所有的静态文件。

4. 安装和配置 Nginx：
   使用 Nginx 来托管构建后的静态文件。

   # 安装 Nginx
   sudo yum install nginx
   
   # 启动 Nginx
   sudo systemctl start nginx
   
   # 设置 Nginx 开机自启
   sudo systemctl enable nginx
   

5. 配置 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 {
      }
}

6. 重启 Nginx：
   保存配置文件后，重启 Nginx 使配置生效。

   sudo systemctl restart nginx
   

7. 防火墙设置（如果需要）：
   确保防火墙允许 HTTP 流量。

   sudo firewall-cmd --permanent --zone=public --add-service=http
   sudo firewall-cmd --reload
   

完成以上步骤后，您应该能够通过浏览器访问您的 Vue 3 项目。