将VUE项目打包后发布到Docker的Nginx服务器后,基本使用正常,发现前端有一个404错误,但页面显示正常js刷新页面,在退出登录后,跳转到404页面,便这个404页面是nginx缺省的,并不是自己vue项目的js刷新页面,参考网上资料后搞定了此问题,特此记录:

  一、原因 刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。

  二、Dockerfile文件

  注意打包文件拷贝的目标路径,后面的default.conf要一致,否则会有问题

   FROM urbgn6za.mirror.aliyuncs.com/library/nginx

 MAINTAINER Wu Jize 
 RUN rm /etc/nginx/conf.d/default.conf
 ADD default.conf /etc/nginx/conf.d/
 #文件拷贝到镜像的目标路径,后面用$uri可以访问到,

  三、Nginx配置文件

  Nginx启动配置文件是default.conf文件,这个文件要特别注意格式

   server {

 listen 8090;
  server_name 192.168.195.17;
  index index.html;
  #charset koi8-r;
  # cross
  #
  location /prod-api/ {
 proxy_pass http://192.168.195.17:8088/;
  }
  # 解决出现404问题
  location / {
try_files $uri $uri/ @router;
index index.html index.htm;
  }
  location @router {
 rewrite ^.*$ /index.html break;
  }
  # redirect server error pages to the static page /50x.html
  #
  error_page500 502 503 504  /50x.html;
  location = /50x.html {
root html;
  }
 }
TAGS:打包 前端 拷贝 页面 js刷新页面 js 定时器刷新页面 js跳转到指定页面并刷新 路径
!如链接失效请在下方留言。本站所有资源均来源于网络,版权属于原作者!仅供学习参考,本站不对您的使用负任何责任。如果有侵权之处请第一时间联系我们删除,敬请谅解!