Laravel配置htaccess部署在子目录后路由异常问题咨询

1. Laravel后端配置调整 #

• 打开项目根目录.env文件，更新以下配置项：

APP_URL=https://maindomain.in/projectfolder
ASSET_URL=https://maindomain.in/projectfolder

• 配置完成后在项目根目录执行命令清理Laravel缓存：

php artisan config:clear
php artisan route:clear
php artisan view:clear

2. 修正子目录下的.htaccess配置 #

你当前的.htaccess缺少子目录重写基准配置，更新为以下内容：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /projectfolder/

    # 强制HTTPS跳转
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    
    # 所有请求转发至public目录
    RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

确认public目录下保留Laravel默认的.htaccess文件即可，无需额外修改。

3. Vue前端配置调整 #

3.1 路由基础路径配置 #

修改vue-router实例的基础路径参数，避免页面跳转时丢失子目录前缀：

// Vue3 + vue-router@4 写法
const router = createRouter({
  history: createWebHistory('/projectfolder/'),
  routes: [/* 你的路由配置 */]
})

// Vue2 + vue-router@3 写法
const router = new VueRouter({
  base: '/projectfolder/',
  mode: 'history',
  routes: [/* 你的路由配置 */]
})

3.2 API请求前缀配置 #

全局配置请求工具的基础路径，确保API请求自动带上子目录前缀：

// 以axios为例
axios.defaults.baseURL = '/projectfolder/api'

3.3 打包路径配置 #

如果前端代码需要打包后部署，需要修改打包工具的公共路径配置：

• Vite项目修改vite.config.js：

export default defineConfig({
  base: '/projectfolder/',
  // 其余配置
})

• Vue CLI项目修改vue.config.js：

module.exports = {
  publicPath: '/projectfolder/',
  // 其余配置
}

所有配置修改完成后，重新打包前端代码部署即可解决跳转错误和API 404问题。

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