Laravel Vue.js同代码不同环境不渲染，历史模式适配求助

我来帮你搞定这个问题——这是SPA部署在子目录时的典型路由重定向问题，结合你的Laravel 5.6环境，给你两个靠谱的解决方案，同时兼顾社交登录的无#需求：

第一步：先配置Vue Router的基础路径 #

因为你的应用部署在mywebapp子目录下，Vue Router必须明确自己的基础路径，否则会默认去根目录匹配路由，导致页面无法渲染。修改你的Vue Router配置：

const router = new VueRouter({
  mode: 'history',
  base: '/mywebapp/', // 关键：对应你的子目录路径
  fallback: true,
  linkExactActiveClass: "active",
  routes: [
    // 你的路由列表
  ]
})

方案一：通过Laravel路由优化解决 #

调整生产环境的routes/web.php，排除静态资源请求（比如js、css、图片），只让非静态资源的路径返回app.blade.php：

// 匹配mywebapp下所有非静态资源的路径
Route::get('mywebapp/{path}', function () {
    return view('app');
})->where('path', '^(?!.*\.(js|css|png|jpg|svg|ico|woff2|woff)$).*');

这个正则规则会跳过所有带静态文件后缀的请求，让Laravel直接返回这些资源，其他所有请求都返回SPA的入口视图，完美兼容history模式。

方案二：通过.htaccess配置解决（Apache环境） #

如果你的生产环境用Apache服务器，可以修改public/.htaccess文件，在原有Laravel规则前添加针对mywebapp子目录的重定向规则：

RewriteEngine On

# 处理Vue History模式在mywebapp子目录的重定向
RewriteCond %{REQUEST_URI} ^/mywebapp/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^mywebapp/(.*)$ /mywebapp/index.php [L]

# 原有Laravel的Rewrite规则
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

这段规则的作用是：当访问mywebapp下的非文件、非目录路径时，自动重定向到mywebapp/index.php（Laravel入口），让Laravel路由处理并返回SPA视图。

社交登录回调的注意事项 #

因为你用了vue-authenticate的社交登录，要确保回调URL包含mywebapp子目录，比如谷歌的回调URL应该设置为：
https://yourdomain.com/mywebapp/auth/google/callback
同时要确保Laravel的Auth相关路由（如果是自定义的）也正确适配子目录路径，避免回调时出现404。

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