Laravel+Vue部署AWS Lambda（Bref）后Vue未编译问题求助

我有一个以API接口为主、部分页面使用Vue.js的Laravel项目，原本在AWS EC2上运行正常，现在迁移到AWS Lambda无服务器架构，已经通过Bref完成serverless deploy部署，API可以正常运行，但Vue组件没有被编译解析，页面上直接显示<login-component/>标签。已经尝试过npm run prod和npm run dev命令，问题依然存在。

附当前serverless.yml配置：

service: serverless-test

provider:
  name: aws
  # The AWS region in which to deploy (us-east-1 is the default)
  region: us-east-1
  # The stage of the application, e.g. dev, production, staging… ('dev' is the default)
  stage: dev
  runtime: provided.al2

package:
  # Directories to exclude from deployment
  patterns:
    - '!node_modules/**'
    - '!tests/**'
    - '!README.md'
    - '!.git/**'
    - '!.idea/**'

functions:
  # This function runs the Laravel website/API
  web:
    handler: public/index.php
    timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
    layers:
      - ${bref:layer.php-80-fpm}
    events:
      - httpApi: '*'
  # This function lets us run artisan commands in Lambda
  artisan:
    handler: artisan
    timeout: 120 # in seconds
    layers:
      - ${bref:layer.php-80} # PHP
      - ${bref:layer.console} # The "console" layer

plugins:
  # We need to include the Bref plugin
  - ./vendor/bref/bref

1. 确认前端编译产物已生成并被正确打包 #

• 执行npm run prod后，检查项目根目录下的public/js和public/css目录，确认存在编译后的app.js（或对应Vue组件的打包文件），且文件名带有哈希值（比如app.abc123.js）。
• 查看serverless.yml的package.patterns，确保没有添加排除public/js、public/css的规则，这些编译产物必须被包含进Lambda部署包。

2. 检查Blade模板的资源引入方式 #

• 确保在使用Vue组件的Blade视图中，通过Laravel的mix()函数引入编译后的JS文件，示例：

  <script src="{{ mix('js/app.js') }}"></script>
  

• 不要直接写死文件路径，mix()会自动读取public/mix-manifest.json中的映射关系，返回正确的带哈希的文件路径，避免缓存问题同时确保资源能被正确加载。

3. 验证Vue组件的注册逻辑 #

• 打开resources/js/app.js，确认目标组件已被全局注册，示例：

  import Vue from 'vue';
  import LoginComponent from './components/LoginComponent.vue';
  
  // 全局注册组件
  Vue.component('login-component', LoginComponent);
  
  new Vue({
      el: '#app' // 确保页面中有对应的根元素（比如<body id="app">）
  });
  

• 如果是局部注册组件，要确保在对应的Vue实例或父组件中正确引入并注册。

4. 清除缓存并重新部署 #

• 执行以下命令清除Laravel缓存：

  php artisan cache:clear
  php artisan view:clear
  php artisan config:clear
  

• 重新执行npm run prod编译前端资源，然后运行serverless deploy重新部署Lambda。

5. 检查Lambda部署包内容 #

• 可以在AWS Lambda控制台找到对应的函数，查看“代码”标签下的部署包内容，确认public/js和public/css目录存在，且包含编译后的文件。如果缺失，需要调整serverless.yml的打包规则，确保这些目录被包含。

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