Laravel 5.5+Vue.js 2.5.7生产环境组件不渲染问题求助

API 探路者

2026-5-28

排查Laravel 5.5 + Vue 2.5.7生产环境组件不渲染问题

我之前也碰到过类似的生产环境Vue不渲染的坑，给你列几个优先级最高的排查方向，一步步来：

1. 先看浏览器控制台的错误！这是重中之重

打开浏览器的开发者工具（按F12），切到「Console」标签页，看看有没有JS报错——比如Vue未定义、路由找不到、axios请求失败，或者静态资源加载出问题（虽然你说请求都是200，但JS内部加载的资源可能有404）。

举个例子：如果看到Vue is not defined，那基本是app.js没加载成功；如果是路由相关的错误，大概率是history模式的服务器配置没做好。

2. 确认资源路径和Laravel的public目录配置

你的项目把public文件夹的内容放到了public_html，而Laravel核心文件在alpha目录，这时候必须告诉Laravel新的public路径：

打开alpha/bootstrap/app.php，添加或者修改这段代码：

$app->bind('path.public', function() {
    return __DIR__.'/../public_html';
});

默认Laravel会找项目根目录下的public文件夹，现在你移到了public_html，不修改的话asset('js/app.js')生成的路径会错。

另外，直接看页面源代码，检查<script src="{{ asset('js/app.js') }}"></script>渲染后的URL是不是正确的（比如http://你的域名/js/app.js），然后复制这个URL直接访问，看看返回的是不是你打包后的app.js内容，而不是Laravel的404页面。

3. 修复Vue History模式的服务器配置

你在Vue路由里用了mode:'history'，这个模式需要服务器配置重写规则，否则路由初始化会失败，导致组件不渲染：

如果你用Apache：

在public_html目录下创建或修改.htaccess，添加以下规则：

<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>

如果你用Nginx：

在服务器配置里添加：

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

4. 检查Vue路由的定义（我怀疑这是你的核心问题！）

看你贴的app.js代码，只导入了各个组件，但没有定义routes数组！VueRouter初始化需要传入路由规则，比如：

// 在app.js里添加这段路由定义
const routes = [
    { path: '/', component: Home },
    { path: '/products', component: Products },
    { path: '/categories', component: Categories },
    // 把你所有的路由都加在这里
];

// 然后再初始化路由
const router=new VueRouter({mode:'history',routes:routes});

如果没有这个routes数组，VueRouter会直接报错，导致Vue实例无法挂载到#products元素上，组件自然不会渲染！

5. 确认打包和上传的文件没问题

先在本地重新执行npm run production，确保没有报错，生成的public/js/app.js是完整的（和本地测试的大小一致）。
FTP上传的时候，一定要用二进制模式上传app.js这类文件，ASCII模式可能会损坏文件内容。
本地可以用PHP内置服务器测试生产打包后的文件：进入public目录，执行php -S localhost:8000，看看页面是否正常，排除打包本身的问题。

6. 清除缓存，避免加载旧资源

生产环境的浏览器缓存或者服务器缓存可能导致加载旧的app.js，给webpack.mix.js加版本号就能解决：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

然后页面里的资源引用要改成{{ mix('js/app.js') }}和{{ mix('css/app.css') }}，这样Laravel会生成带哈希的资源路径，强制浏览器加载最新文件。

先从第4点和第1点开始排查，这两个是最可能的原因！

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

Laravel 5.5+Vue.js 2.5.7生产环境组件不渲染问题求助

1. 先看浏览器控制台的错误！这是重中之重 #

2. 确认资源路径和Laravel的public目录配置 #

3. 修复Vue History模式的服务器配置 #

如果你用Apache： #

如果你用Nginx： #

4. 检查Vue路由的定义（我怀疑这是你的核心问题！） #

5. 确认打包和上传的文件没问题 #

6. 清除缓存，避免加载旧资源 #