Vue设置路由History mode模式，打包vue run build后访问404问题

问题描述

Vue设置路由History mode模式，打包vue run build后页面访问报404错误。一般开发单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，通常在路由index.js里面设置：

export default new Router({
  // base: '/dist/',
  mode: 'history',

解决方法

（1）Apache需要配置httpd.conf

开启Rewrite：LoadModule rewrite_module modules/mod_rewrite.so

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

（2）Nginx需要配置

根目录：

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;
}