Vue设History mode模式下,vue run build打包后访问404或200但页面不显示问题

Vue设置路由History mode模式，打包 vue run build后页面不显示问题，404或者200但是空白页，一般开发的单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，我们通常在路由index.js里面设置：

export default new Router({

mode: 'history',  

这样URL不再会有#号，在Dev开发阶段一切都是正常的，可是打包发布之后，访问项目路径：一片空白，js,css加载正常(虽然显示访问正常200，但是并没有加载js，css文件，而是首页)；这是因为你的项目打包dist并不是你服务器访问的跟目录，访问是http://xxx.xxx.com/dist，跟目录访问：http://xxx.xxx.com；由于包并不是根目录router路由无法找到路径中的组件，解决方法：

1、不是根目录，需要修改router中的index.js路由部分，在每个path中加上你项目名称就行了，这样就能够成功了

{
path: '/dist/',
redirect: '/dist/asd'
} 

或者

{
path: '/',
redirect: '/asd'
}（不变）

在mode: 'history',之后添加

base: '/dist/',（推荐使用）

2、将dist目录设置为服务器跟目录即可。可能需要配合我前一篇文章 《vue打包后js和css、图片不显示，引用的字体找不到问题》 一起实现 

3、如果访问出现 404错误(重点)：

（1）apache需要修改httpd.conf：

 LoadModule rewrite_module modules/mod_rewrite.so 将打开 

 文件最后添加：ErrorDocument 404 /index.html 

（2）

nginx需要配置：

#防止404找不到
是根目录：
location @router { 
  rewrite ^.*$ /index.html last; 
 }
location / {    
   try_files $uri $uri/ @router;    
    index index.html; 
} 
不是根目录：
location @router { 
  rewrite ^.*$ /dist/index.html last; 
 }
location ～/dist/.* {    
   try_files $uri $uri/dist @router;    
    index index.html; 
}

4、如果每次点击都会刷新页面，出现这个的原因是因为使用了window.location来跳转，只需要改为使用router路由跳转：

在main.js中配置中将router绑定到全局

import router from 'vue-router'  

Vue.prototype.router = router;或者 Vue.use(router) 这也是我们创建项目的时候都必须设置的之后使用如下的方式来控制跳转 点击事件跳转this.$router.push('dist/asd'); 或者跳转