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.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

})