Laravel 5.6添加自定义路由文件及Vue路由#号问题咨询

一、能不能创建vueroutes.php这类额外路由文件？ #

当然可以！Laravel的路由系统灵活性拉满，完全支持添加自定义路由文件，操作步骤超简单：

1. 新建路由文件：直接在项目根目录的routes文件夹下创建vueroutes.php，然后在里面写你需要的路由规则就行——比如专门给Vue SPA设置的入口路由，怎么方便怎么来。

2. 让Laravel加载这个文件：打开app/Providers/RouteServiceProvider.php，在map方法里新增加载自定义路由的逻辑，同时补一个对应的映射方法：

public function map()
{
    $this->mapApiRoutes();
    $this->mapWebRoutes();
    $this->mapVueRoutes(); // 新增这一行，告诉Laravel要加载咱们的自定义路由
}

// 新增这个方法，配置自定义路由的中间件和命名空间
protected function mapVueRoutes()
{
    Route::middleware('web') // 可以根据需求换成api中间件
         ->namespace($this->namespace)
         ->group(base_path('routes/vueroutes.php'));
}

这样Laravel启动时就会自动加载vueroutes.php，和默认的web.php、api.php用法完全一致。

二、生产环境Vue路由出现#号的解决办法 #

测试环境正常、生产环境突然冒出来#号，大概率是Vue路由的history模式没在生产服务器上配置到位，导致路由自动 fallback到了默认的hash模式（带#）。咱们一步步搞定：

1. 确认Vue路由的模式设置 #

打开你的Vue路由配置文件（一般是assets/js/router/index.js），确保已经开启了history模式——这是实现干净URL的关键：

const router = new VueRouter({
  mode: 'history', // 必须开这个模式才会去掉#号
  routes: [
    // 你的路由规则列表
  ]
})

2. 配置生产服务器的路由重写 #

history模式需要服务器配合：把所有非静态资源的请求都转发到Laravel的public/index.php，不然直接访问子路由（比如/about）会出现404，Vue就会自动切回hash模式。

如果你用Nginx：

在你的站点配置文件里，添加这段规则：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

意思很简单：先尝试访问请求的静态文件，找不到的话就把请求转给index.php，让Laravel处理后再交给Vue路由接管。

如果你用Apache：

确保Laravel根目录下的public/.htaccess文件存在（Laravel默认自带），里面的重写规则要正确：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # 处理授权头
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 移除末尾多余的斜杠
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 所有非静态请求转发到index.php
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

同时要确认Apache开启了mod_rewrite模块，不然重写规则等于白写。

3. 确保Laravel路由的兜底配置 #

不管你用web.php还是自定义的vueroutes.php，都需要一个兜底路由，把所有非API、非静态资源的请求都指向Vue的入口视图，比如：

Route::get('/{any}', function () {
    return view('app'); // 这里填你的Vue入口视图文件名
})->where('any', '.*');

这个路由会捕获所有匹配不到的GET请求，返回Vue的入口页面，让Vue路由去处理具体的路径。

做完这些配置，生产环境的Vue路由应该就能正常用干净的URL，不会再出现#号啦！

内容的提问来源于stack exchange，提问作者user9465677