很多小伙伴会发现用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.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_URL
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
