nginx部署vue项目出现查找不到js,css文件解决方法

在这里插入图片描述

1.先测试你的vue文件本地是否正常显示打开,正常再进行第二步,否则是你vue打包后的文件出现错误了

2.测试nginx是否正常,可以在ftp中查找你vue项目中的文件,浏览器打开nginx打开那个文件,能正常打开则进入第三部,否则就是你nginx配置问题,nginx无法映射此vue文件夹

3.重新配置一个新的nginx的conf文件,

    #  前端vue转发
    location / {
root /data/frontend/dist;
        index index.html;   #启动文件
    try_files $uri $uri/ /index.html;   #解决刷新404
  expires   48h;
        access_log   off;
     }

将你得vue生成的dist文件直接指向/目录,然后能正常访问的话,就是你之前nginx的 location的配置问题,请重新配置

4.最终如果无法理解nginx配置的话,一律将location 中/ 对应vue中dist文件,不要弄什么/static 对应vue的dist文件

以下为完整的参考文件

server {
    listen 8004;
    server_name 127.0.0.1;
    charset utf-8;
    access_log  on;

    #  前端vue转发
    location / {
root /data/frontend/dist;
        index index.html;   #启动文件
    try_files $uri $uri/ /index.html;   #解决刷新404
  expires   48h;
        access_log   off;
     }

    location ~* \.(gif|jpg|jpeg|png|css|js|ico|css|eot|svg|ttf|woff|mov)$ {
root /data/frontend/dist;
  expires   48h;
access_log   off;
    }
    location /api {
        #uwsgi_pass manage;
        #uwsgi_send_timeout 600;
        #uwsgi_connect_timeout 600;
        #uwsgi_read_timeout 600;
        proxy_pass http://127.0.0.1:8030/;
 		proxy_connect_timeout 600;                #配置点1
            proxy_read_timeout 600;                  #配置点2,如果没效,可以考虑这个时间配置长一点
            proxy_send_timeout 600;                  #配置点3
            proxy_set_header Host $host:$server_port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
   }
}

最终你需要

nginx  -s reload
Logo

前往低代码交流专区

更多推荐