ToB企服应用市场:ToB评测及商务社交产业平台

标题: Nginx部署前端Vue项目具体教程 [打印本页]

---

作者: 海哥    时间: 2024-9-27 21:43
标题: Nginx部署前端Vue项目具体教程
Nginx部署前端Vue项目具体教程

本教程将具体介绍怎样使用Nginx部署前端Vue项目，涵盖从项目打包、Nginx安装设置到最终部署和测试的全过程。通过丰富的案例和具体的步骤，资助读者轻松完成Vue项目的部署。
准备工作

在开始部署之前，请确保你已具备以下条件：

• 一个已经开辟完成的Vue项目。
  
• 一个安装有Nginx的服务器（可以是本地电脑或远程服务器）。
  
• Node.js和npm已安装在服务器上（假如用于构建Vue项目）。
  

打包Vue项目

首先，你需要将Vue项目编译为生产情况版本。这可以通过Vue CLI完成。

• 安装依靠
  在项目根目次下，运行以下命令来安装项目依靠：
  
  1. npm install

  复制代码
• 编译项目
  在项目根目次中，运行以下命令来编译项目：
  
  1. npm run build

  复制代码
  此命令将在项目根目次下生成一个dist文件夹，里面包含了全部的静态文件，包括HTML、JavaScript、CSS和图片等资源。这些文件是部署到服务器上的内容。
  

安装Nginx

假如Nginx还没有安装，你需要先安装它。以下是不同操作系统上的安装命令：

• Ubuntu/Debian 系统
  
  1. sudo apt-get update
  2. sudo apt-get install nginx

  复制代码
• CentOS/RHEL 系统
  
  1. sudo yum update
  2. sudo yum install nginx

  复制代码

安装完成后，你可以通过以下命令启动Nginx并设置为开机自启：

1. sudo systemctl start nginx
2. sudo systemctl enable nginx

复制代码

设置Nginx

Nginx的设置文件通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/目次下。你需要在这些位置创建或修改设置文件以支持Vue项目。
创建设置文件

在/etc/nginx/sites-available/目次下创建一个新的设置文件，例如my-vue-app：

1. sudo nano /etc/nginx/sites-available/my-vue-app

复制代码

然后，添加以下内容到设置文件中：

1. server {
2.     listen 80;
3.     server_name your_domain_or_ip;
5.     root /var/www/my-vue-app/dist;
6.     index index.html;
8.     location / {
9.         try_files $uri $uri/ /index.html;
10.     }
12.     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {
13.         expires max;
14.         log_not_found off;
15.     }
17.     error_page 500 502 503 504 /50x.html;
18.     location = /50x.html {
19.         root /usr/share/nginx/html;
20.     }
21. }

复制代码

在上述设置中，你需要将your_domain_or_ip替换为你的域名或IP地址，并确保root指令指向你的Vue项目dist文件夹的路径。
启用设置文件

生存并关闭文件后，需要创建一个符号链接使设置文件收效：

1. sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/

复制代码

然后，测试Nginx设置文件的语法是否正确：

1. sudo nginx -t

复制代码

假如语法无误，重启Nginx以应用设置：

1. sudo systemctl restart nginx

复制代码

部署Vue项目

• 上传dist文件夹
  使用SFTP、SCP或其他文件传输工具，将dist文件夹上传到服务器上。建议将文件夹放在/var/www/my-vue-app/目次下：
  
  1. scp -r dist/ user@your_server_ip:/var/www/my-vue-app/

  复制代码
• 设置文件权限
  确保Nginx对项目文件有读取权限：
  
  1. sudo chown -R www-data:www-data /var/www/my-vue-app
  2. sudo chmod -R 755 /var/www/my-vue-app

  复制代码

设置SSL（可选）

假如你的网站需要HTTPS支持，可以通过Let’s Encrypt免费获取SSL证书并设置在Nginx上。使用Certbot工具可以方便地获取并设置SSL证书：

1. sudo apt-get install certbot python-certbot-nginx
2. sudo certbot --nginx -d your_domain_or_ip

复制代码

Certbot将生成SSL证书并主动修改Nginx设置文件以使用HTTPS。
测试和验证

现在，你可以通过欣赏器访问你的域名或IP地址，检查Vue项目是否正常运行。检查控制台和网络请求，确保全部静态资源加载正常，没有错误。
假如遇到404错误或其他问题，检查Nginx设置中的try_files指令，确保它正确指向index.html，以便Vue处理路由。
总结

通过以上步骤，你可以在Nginx服务器上成功部署Vue项目。这个过程包括打包Vue项目、安装和设置Nginx、上传项目文件、设置文件权限以及（可选的）设置SSL。Nginx作为高性能的Web服务器，结合Vue的前端路由和静态文件服务，能够为用户提供流畅和安全的访问体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4