vue项目nginx服务器部署

Vue.js 是一款用于构建 Web 界面的渐进式框架，由于其高效、灵活、易用等优点，已经成为前端开发的热门选择之一。
在开发 Vue 项目后，通常需要将其部署到服务器上进行线上访问，而 Nginx 作为一个高性能的 Web 服务器，也是常用的部署工具之一。
下面就是 Vue 项目在 Nginx 服务器上部署的详细教程。

前提条件

在进行部署之前，需要确保满足以下条件：

• 已经开启服务器的 Nginx 服务。
• 已经安装 Node.js，且版本不低于 8.9.0。
• 已经使用 Vue CLI 3 创建好了项目，并在本地运行成功。
  

  打包项目

  在进行部署前，需要将 Vue 项目打包成静态文件，并将其部署到服务器上。在项目的根目录下，运行以下命令进行打包：

  npm run build

  此命令将会在项目的 dist 目录下生成打包后的静态文件。

  配置 Nginx

  1. 在服务器上安装 Nginx，并使用管理员权限打开 Nginx 配置文件：

     sudo vi /etc/nginx/nginx.conf

  2. 找到 http 部分的配置，添加以下配置信息：

     server {
     listen 80;  # 监听的端口号
     server_name example.com;  # 服务器名称
     root /path/to/project/dist;  # 项目打包生成的静态文件所在路径
     location / {
     try_files $uri $uri/ /index.html;  # 配置路由，使得页面刷新后能够正确展示
     }
     }

     其中，example.com 为服务器的域名或 IP 地址，/path/to/project/dist 为项目打包生成的静态文件所在路径。

  3. 保存并关闭配置文件，并重启 Nginx 服务：

     sudo service nginx restart

  4. 配置防火墙
     如果在服务器上启用了防火墙，需要打开 80 端口，否则无法访问 Vue 项目。运行以下命令打开 80 端口：

     sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
     sudo firewall-cmd --reload

     测试访问

     完成以上步骤后，就可以通过浏览器访问 Vue 项目了。在浏览器中输入服务器的域名或 IP 地址，即可访问项目的首页。

     结论

     以上就是 Vue 项目在 Nginx 服务器上部署的详细教程。通过这个教程，您可以学习到如何使用 Nginx 部署 Vue 项目，并使其能够在线上正常运行。

     <span>香港五网CN2网络云服务器链接：www.tsyvps.com</span>
     <span>蓝易云香港五网CN2 GIA/GT精品网络服务器。拒绝绕路，拒绝不稳定。</span>