使用Nginx部署Vue项目全过程及踩坑记录

目录

Nginx部署Vue项目使用Nignx部署Vue项目步骤

1.打包Vue项目2.复制dist文件夹到Vue默认目录3.高级配置



重新启动 Nginxlinux环境总结

Nginx部署Vue项目

很多小伙伴在做完Vue项目之后，想要部署到服务器上自己运行试试。

其实使用Nginx就可以轻松的做到，并且实现请求转发等功能。下面来看看使用步骤吧。

使用Nignx部署Vue项目步骤

1.打包Vue项目

1. npm run build

复制代码 首先使用打包命令打包Vue项目，之后得到一个dist文件夹。

这里面存放的是已经打包好的静态资源文件。

注意：这里不同的项目打包的命令可能不一样，需要在 package.json 里看 scripts，每个属性就是一个命令，一般都会有 npm run serve, npm run build, npm run lint… 等等

不同的项目结构不一样哦。我使用的是vue-element-admin框架。具体打包方法可以查看框架的相关文档哦。

2.复制dist文件夹到Vue默认目录

安装好Nginx，找到安装根目录。将dist目录里的文件复制到html中。

这是默认的nginx根目录，如果这样做的话你不用修改配置文件就可以直接运行。

复制完成后，双击nginx.exe运行nginx就可以运行啦。

3.高级配置

通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist仍到服务上的具X置，然后修改nginx.conf的root路径来指向我们的dist。

如果你想根据自己的需求来配置nginx，或者想部署多个项目的话。你需要通过修改配置文件来完成。

这里放一个我自己的配置。具体可以参考注释。

1. server {
2.     # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
3.     listen       8888;
4.     # 服务名称，无所谓
5.     server_name  localhost;
7.     # 上述端口指向的根目录
8.     root /opt/asing1elife/teamnote;
9.     # 项目根目录中指向项目首页
10.     index index.html;
12.     client_max_body_size 20m;
13.     client_body_buffer_size 128k;
15.     # 根请求会指向的页面
16.     location / {
17.       # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
18.       try_files $uri $uri/ @router;
19.       # 请求指向的首页
20.       index index.html;
21.     }
23.     # 由于路由的资源不一定是真实的路径，无法找到具体文件
24.     # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
25.     location @router {
26.       rewrite ^.*$ /index.html last;
27.     }
29.     # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
30.     # 这里使用 /teamnote/api/ 而不是 /teamnote/ ，是因为前端项目本身的访问链接就是 http:192.168.7.8:8888/teamnote/
31.     # 为了防止在访问页面时请求就被 Nginx X转发，这里需要更具体的配置，才能和前端访问请求区分开
32.     location /teamnote/api/ {
33.           # 后端的真实接口
34.           proxy_pass http://192.168.7.8:2592/teamnote/api/;
35.           proxy_redirect off;
36.           proxy_set_header Host $host;
37.           proxy_set_header X-Real-IP $remote_addr;
38.           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
39.           proxy_set_header   Cookie $http_cookie;
40.           # for Ajax
41.           #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
42.           proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
43.           proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
44.           proxy_set_header x-requested-with $http_x_requested_with;
45.           client_max_body_size 10m;
46.           client_body_buffer_size 128k;
47.           proxy_connect_timeout 90;
48.           proxy_send_timeout 90;
49.           proxy_read_timeout 90;
50.           proxy_buffer_size 128k;
51.           proxy_buffers 32 32k;
52.           proxy_busy_buffers_size 128k;
53.           proxy_temp_file_write_size 128k;
54.     }
55. }

复制代码
重新启动 Nginx

使用 nginx -s reload 可以重新加载 Nginx 的配置文件，但如果配置文件有错，不一定会抛出异常使用 nginx -s stop 先停止 Nginx 服务，再使用 nginx 尝试启动 Nginx 服务，如果配置文件有异常，则会抛出异常告知启动失败

linux环境

通常情况下很少使用windows来作为nginx的服务器，一般使用linux。


对于linux安装nginx有两种方式

一种是使用官方已经编译好的包来安装一种是使用源码构建安装

第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，这种实际上就是下一个tar.gz包仍到linux服务去自己编译。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了，然后使用

1. # centos 7
2. systemctl restart nginx.service
3. # centos 6
4. service nginx restart

复制代码 或者是平滑重启

1. service nginx reload

复制代码
centos 7

1. systemctl restart nginx.service

复制代码
centos 6

1. service nginx restart

复制代码 或者是平滑重启

1. service nginx reload

复制代码 当然，我更推荐宝塔面板，操作简介方便！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件技术网。