html上传文件至服务器404,如何解决vue在history模式下打包上传至服务器后刷新页面出现404的问题...

在我们使用vue在本地开发时挺顺利的，但是打包放到服务器上时可能会遇到各种问题，其中一个比较常遇到的问题就是vue在history模式下打包并上传到服务器后刷新页面出现404页面的情况，下面淘梦互联来分析一下这种情况产生的原因，并提供相应的解决方法。

出现问题的原因：

产生这种情况的原因多是在history模式下时，通过url方式直接回车，它是会以http get方式请求后台，但是后台没有你这个请求路径，所以会报404，而这个路径是前端自己定义的，所以要由前端处理，因为vue单页面应用，所以它只有一个页面index.html，所以会出现找不到相关资源从而报404的问题。

问题的解决办法：

服务器配置

后台或者nignx服务器发现404时，直接重定向到index.html，这样前端获取了这个路径，它就会根据自己路由来处理了。

比如在Nginx下可以这样配置server {

listen    80; #默认端口是80，如果端口被占用可以修改成其他未被占用的端口号

server_name    demo.daipianpian.com; #访问域名

root    /home/demo; #vue项目的打包后文件放置的目录

add_header    Access-Control-Allow-Origin *; # 允许所有域名的脚本访问该资源，解决跨域问题(可按照具体需求进行修改)

# vue项目的打包后文件直接放到 /home/demo目录下的时候的配置

location / {

try_files $uri $uri/ /index.html; # url统一重定向到index.html

}

# vue项目的打包后文件直接放到 /home/demo目录下的二级目录dist文件夹的时候配置

location ~ /dist/ {

try_files $uri $uri/ /dist/index.html; # url统一重定向到子目录dist/index.html

}

}

前端配置：

1. vue-cli3.x是需在vue.config.js里对输出文件目录publicPath进行设置// vue项目的打包后文件直接放到 /home/demo目录下的二级目录dist文件夹的时候配置

publicPath: '/'

# vue项目的打包后文件直接放到 /home/demo目录下的二级目录dist文件夹的时候配置

publicPath: '/dist/'

2. 并在路由配置文件router.js里将mode修改为'history'，base修改为process.env.BASE_URLconst router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

0

上一篇：遭遇ddos攻击时服务器有什么表现？遭遇CC攻击时服务器有什么表现？

下一篇：云服务器的网络安全应该从哪些方面进行保障