nginx 上历史模式的 Vue 路由器服务器配置不起作用

Posted 2023-02-22

【中文标题】nginx 上历史模式的 Vue 路由器服务器配置不起作用

【英文标题】：Vue router server configuration for history mode on nginx does not work

【发布时间】：2016-07-24 19:17:19

【问题描述】：

我从vue router documentation阅读了以下注释

注意：使用历史模式时，需要正确配置服务器，以便用户直接访问您网站上的深层链接 没有得到 404。

所以，我尝试如下配置我的 nginx

server 
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/laravel/public/;
    index index.php index.html index.htm;

    server_name working.dev;

    location /user 
        rewrite ^(.+)$ /index.php last;

    

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

    location ~ \.php$ 
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    

以下是我的Vue配置

var router = new VueRouter(
    hashbang: false,
    history: true,
    linkActiveClass: "active",
    root:  '/user'
);

但是，当用户直接访问我网站中的深层链接时，我仍然得到 404。

已编辑：我也使用 Laravel 路由。以下是我的 laravel 路由。

Route::get('user', function() 
    return View::make('user.index');
);

【问题讨论】：

那么，你解决了吗？

@antoniputra 是的，有我自己的答案。

【参考方案1】：

我刚刚阅读了mattstauffer blog post，终于在 Laravel 路线中找到了方法。像下面这样

Route::get('user/vue_capture?', function() 
    return View::make('user.index');
)->where('vue_capture', '[\/\w\.-]*');

当用户直接访问站点的深层链接时，它不会返回 404。