vue 文件放到nginx 样式没有了 vue打包部署到nginx

1.下载nginx，推荐到官网下载

nginx的下载 http://nginx.org/en/download.html

选择第二个稳定版下载即可，下载好后解压得到如下目录

其中最主要的配置文件nginx.conf在conf文件夹中

简单介绍下几个nginx命令

start nginx 启动nginx
nginx -s reload ：修改配置后重新加载生效
nginx -s reopen ：重新打开日志文件
nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否正确

关闭nginx：
nginx -s stop :快速停止nginx
quit ：完整有序的停止nginx

启动nginx,配置nginx.conf配置文件

本文采用自定义conf配置文件然后用命令include内嵌到nginx.conf的方式 自定义配置文件名字是fapiao.conf

以下为配置内容

#实际的服务器列表，负载均衡，默认采用轮询，可添加多个server
upstream fapiao{
#负载均衡分发策略默认为轮询，策略比较多不一一介绍，只介绍ip_hash，每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session共享的问题（直接用以下方式添加分发策略即可）

ip_hash；
server 127.0.0.1:8080;

#负载均衡可直接在下方加ip:端口号，如下

#server 192.168.1.116:8182;

}

server{
#监听端口
listen 80;
#监听域名
server_name fp.zzfapiao.com;

#首页
index index.html

#编码格式
charset utf-8;
    
#静态文件配置（以.jpg,.gif等后缀结尾的请求由nginx自己处理访问此静态目录中文件,可以是实际项目中的静态文件存放的目录）
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|html)$ {
    root C:/d/nginx/nginx-1.16.0/static/photo;
    #过期30天
    expires 30d;
}

#项目中的静态文件由nginx管理
#location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|html|xml)$ {
    #root C:\gongzuobusiness\ims05\ims\WebRoot;
    #过期30天
    #expires 30d;
#}

#反向代理跳转的服务器
location / {    
#location /v1/online {
    #代理跳转的路径，此处用的upstream的name,location后面设置映射的路径
    proxy_pass  http://fapiao/;

    #Proxy Settings  代理参数的配置
    proxy_redirect     off;

#小知识点，以下如果配置host:$server_port;

proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
 proxy_max_temp_file_size 0;
 proxy_connect_timeout 90;
 proxy_send_timeout 90;
 proxy_read_timeout 90;
 proxy_buffer_size 4k;
 proxy_buffers 4 32k;
 proxy_busy_buffers_size 64k;
 proxy_temp_file_write_size 64k;
 }
 #禁止访问 .htxxx 文件
 location ~ /.ht {
 deny all;
 }

#错误处理页面（可选择性配置）
#error_page   404              /404.html;
#error_page   500 502 503 504  /50x.html;
#location = /50x.html {
#    root   html;
#}

}

重启nginx