0


nginx部署前端vue项目完整详细讲解

在这里插## 标题入图片描述

大家好,我是程序员小羊!

前言:

在使用Nginx部署前端Vue项目时,确保项目的生产环境版本已经打包,并且Nginx已经安装并配置在服务器上。以下是详细的步骤,包括打包Vue项目、配置Nginx、部署和测试项目。

1. 打包Vue项目

首先,你需要将Vue项目编译为生产环境版本。可以通过Vue CLI完成这一步。

1.1 安装依赖

确保已经安装了Node.js和npm。然后在项目根目录下运行以下命令安装依赖:

npminstall
1.2 编译项目

在项目根目录中,运行以下命令来编译项目:

npm run build

此命令会在项目根目录下生成一个

dist

文件夹,里面包含了所有的静态文件,包括HTML、JavaScript、CSS和图片等资源。

dist

文件夹是用于部署到服务器上的内容。

2. 安装Nginx

如果Nginx还没有安装,可以通过以下命令安装:

2.1 Ubuntu/Debian 系统
sudoapt-get update
sudoapt-getinstall nginx
2.2 CentOS/RHEL 系统
sudo yum update
sudo yum install nginx

安装完成后,启动Nginx:

sudo systemctl start nginx

并将其设置为开机自启:

sudo systemctl enable nginx

3. 配置Nginx

现在需要配置Nginx以便为Vue项目提供服务。配置文件通常位于

/etc/nginx/nginx.conf

/etc/nginx/sites-available/

目录下。

3.1 创建Nginx配置文件

可以在

/etc/nginx/sites-available/

目录下创建一个新的配置文件。例如,创建

my-vue-app

配置文件:

sudonano /etc/nginx/sites-available/my-vue-app

在这个文件中,添加以下内容:

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/my-vue-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {
        expires max;
        log_not_found off;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

上述配置内容解释如下:

  • listen 80;:指定服务器监听80端口。
  • server_name your_domain_or_ip;:将your_domain_or_ip替换为你的域名或IP地址。
  • root /var/www/my-vue-app/dist;:指定静态文件的根目录,这里设置为你之前打包的dist文件夹路径。
  • index index.html;:指定默认加载的文件。
  • location / { try_files $uri $uri/ /index.html; }:该部分确保了Vue的路由能够正确工作。Nginx将尝试加载请求的文件,如果找不到,将始终返回index.html,以便由Vue路由处理。
  • location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ { expires max; log_not_found off; }:该部分用于设置静态资源的缓存,提高加载速度。
3.2 启用配置文件

保存并关闭文件后,需要创建一个符号链接使配置文件生效:

sudoln-s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/
3.3 测试并重启Nginx

在启用新的配置之前,建议测试Nginx配置文件的语法是否正确:

sudo nginx -t

如果语法无误,重启Nginx以应用配置:

sudo systemctl restart nginx

4. 部署Vue项目

4.1 将打包文件上传到服务器

通过SFTP、SCP或其他文件传输工具,将

dist

文件夹上传到服务器上。建议将文件夹放在

/var/www/my-vue-app/

目录下:

scp-r dist/ user@your_server_ip:/var/www/my-vue-app/
4.2 设置文件权限

确保Nginx对项目文件有读取权限:

sudochown-R www-data:www-data /var/www/my-vue-app
sudochmod-R755 /var/www/my-vue-app

5. 配置SSL(可选)

如果你需要为网站配置SSL(推荐使用HTTPS),可以通过Let’s Encrypt免费获取SSL证书并配置在Nginx上。

5.1 安装Certbot

Certbot是一个方便获取Let’s Encrypt SSL证书的工具。

sudoapt-getinstall certbot python-certbot-nginx
5.2 获取证书并配置Nginx

运行以下命令获取SSL证书并自动配置Nginx:

sudo certbot --nginx-d your_domain_or_ip

Certbot将会生成SSL证书,并修改Nginx配置文件使其使用HTTPS。

5.3 自动更新证书

Let’s Encrypt的证书有效期为90天,因此建议设置自动更新。可以通过添加定时任务来实现:

echo"0 3 * * * /usr/bin/certbot renew --quiet"|sudotee-a /etc/crontab > /dev/null

这个任务会在每天凌晨3点运行Certbot以更新证书。

6. 测试部署

最后,打开浏览器,访问你的域名或IP地址,检查是否能够正确加载你的Vue项目。检查控制台和网络请求,确保所有静态资源加载正常,没有错误。

如果遇到404错误或其他问题,检查Nginx配置中的

try_files

指令,确保它指向

index.html

,以便由Vue处理路由。

7. 总结

通过以上步骤,你可以在Nginx服务器上成功部署Vue项目。这个过程包括打包Vue项目、配置Nginx、部署和测试等关键环节。Nginx作为一个高性能的Web服务器,能够高效地服务于前端应用,结合SSL配置,还能为你的用户提供安全的访问环境。

结尾

今天这篇文章就到这里了,大厦之成,非一木之材也;大海之阔,非一流之归也。感谢大家观看本文

在这里插入图片描述

在这里插入图片描述

标签: 前端 nginx vue.js

本文转载自: https://blog.csdn.net/m0_63815035/article/details/141684460
版权归原作者 程序员小羊! 所有, 如有侵权,请联系我们删除。

“nginx部署前端vue项目完整详细讲解”的评论:

还没有评论