vue打包后报错404

Question

首页可以正常访问 但是线上访问/fun就报404 在本地访问就没事
nginx报错如下 为什么不是访问fun路组件而是去访问fun文件夹呢？
open() "/var/www/html/wgxjj/fun" failed (2: No such file or directory)

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Fun from '@/components/Fun'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/fun',
      name: 'fun',
      component: Fun
    }
  ]
})

nginx配置

server{                                                     
         listen 80;
         server_name www.domain.com domain.com;
         return 301 https://domain.com$uri;
}

server {
        listen 443 ssl;
        server_name domain.com;
        client_max_body_size 20M;
        ssl on;
        ssl_certificate /etc/nginx/ssl/1_domain.com_bundle.crt;
        ssl_certificate_key /etc/nginx/ssl/2_domain.com.key;
        set $root_path '/var/www/html/wgxjj';    
        root $root_path;
        index index.php index.html index.htm;
      
        location ~ .*\.(gif|jpg|jpeg|bmp|png|mp3|wma|mp4|swf|txt)$
        {
             add_header Content-Disposition "attachment";
        }  
      
        location / {  
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

            if ($request_method = 'OPTIONS') {
                return 204;
            }
        } 
    }

Answer 1

vue-router的 history 模式需要进行后端配置，如果你配置了，那可能是配置错误。

后端配置例子