vue项目nginx服务器部署

以一 2024-01-11 19:46:35  49997 赞同 0 反对 0

分类：资源

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

Vue.js 是一款用于构建 Web 界面的渐进式框架，由于其高效、灵活、易用等优点，已经成为前端开发的热门选择之一。

在开发 Vue 项目后，通常需要将其部署到服务器上进行线上访问，而 Nginx 作为一个高性能的 Web 服务器，也是常用的部署工具之一。

下面就是 Vue 项目在 Nginx 服务器上部署的详细教程。

前提条件

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

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

打包项目

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

npm run build

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

配置 Nginx

在服务器上安装 Nginx，并使用管理员权限打开 Nginx 配置文件：
```
sudo vi /etc/nginx/nginx.conf
```

找到
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 为项目打包生成的静态文件所在路径。

保存并关闭配置文件，并重启 Nginx 服务：
```
sudo service nginx restart
```
配置防火墙

如果在服务器上启用了防火墙，需要打开 80 端口，否则无法访问 Vue 项目。运行以下命令打开 80 端口：
```
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload
```

测试访问

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

结论

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

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

vue项目nginx服务器部署

前提条件

打包项目

配置 Nginx

测试访问

结论

相关资源

关注我们