nginx——安装部署vue项目

下载

下载nginx https://nginx.org/en/download.html

 

解压安装包即可使用,目录如下:

|-- conf               #这是nginx所有配置文件的目录,极其重要
    |-- fastcgi.conf   
    |-- fastcgi_params 
    |-- koi-utf
    |-- koi-win
    |-- mime.types     #媒体类型,
    |-- nginx.conf     #配置主文件,端口、路径映射都需要在这里配置
    |-- scgi_params    
    |-- uwsgi_params   
    `-- win-utf
|-- contrib            #fastcgi临时数据目录
|-- docs               #帮助文档,包括license、readme.md等
|-- html               #这是编译安装时Nginx的默认站点目录,类似Tomcat的webapp目录
    |--50x.html        #错误页面优雅替代显示文件,例如:出现502错误时会调用此页面
    |-- index.html     #默认的首页文件,首页文件名字是在nginx.conf中事先定义好的。
|-- logs               #这是Nginx默认的日志路径,包括错误日志及访问日志
    |-- access.log     #这是Nginx的默认访问日志文件,使用tail -f access.log,可以实时观看网站用户访问情况信息
    |-- error.log      #这是Nginx的错误日志文件,如果Nginx出现启动故障等问题,一定要看看这个错误日志
|-- temp               #临时目录

 

nginx.conf

下面例举了一些常用配置,原版文件中实际包含所有配置,取消前面的注释,即可启用

worker_processes  1;                              ← worker进程的数量,通常1个就够了
events {                               
    worker_connections  1024;                     ←每个worker进程支持的最大连接数
} 
http {                                            
    include       mime.types;                     ← Nginx支持的媒体类型库文件
    default_type  application/octet-stream;       ← 默认的媒体类型
    sendfile        on;                           ←开启高效传输模式
    keepalive_timeout  65;                        ←连接超时
    server {                                      ←可以同时存在多个Server
        listen       80;                          ←提供服务的端口,默认80
        server_name  localhost;                   ←提供服务的域名主机名
        location / {                              ←注意这里的斜杠,不是写错了,不要顺手删掉了
            root   html;                          ←指定安装路径(对于后端开发,类似于指定Tomcat的Webapp路径)
            index  index.html index.htm;          ←默认的首页文件,多个用空格分开
        }       
        error_page   500 502 503 504  /50x.html;  ←出现对应的http状态码时,使用50x.html回应客户
        location = /50x.html {                    
            root   html;                          ←指定对应的站点目录为html
        }
    }
}

Vue项目打包

执行命令:npm run build,之后剪切dist下面全部内容,复制到nginx下的html文件夹(需要提前清空html文件夹),点击nginx.exe开始运行即可。

如果是默认,就访问:http://localhost:80/,如果调整过nginx.conf,按照配置文件中的端口进行访问

参考:https://www.cnblogs.com/liang-io/p/9340335.html

posted on   疯狂的妞妞  阅读(230)  评论(0编辑  收藏  举报

(评论功能已被禁用)
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
历史上的今天:
2019-12-17 SpringBoot2(八)使用模版引擎时的注意事项
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示