GCP App Engine部署Vue.js报500错误找不到server.js如何解决？

GCP App Engine Node.js 标准环境默认启动逻辑为查找项目根目录下的server.js作为服务端入口启动，而你部署的是纯前端Vue单页应用，没有对应的服务端入口文件，且现有配置未告知App Engine如何处理Vue打包后的静态资源，因此触发500错误。你本地运行正常是因为调用了vue-cli自带的开发服务器，和GAE的生产部署逻辑完全不同，之前添加的vue.config.js入口配置也和该报错无关，可以直接删除。

按照以下步骤修改配置后重新部署即可解决：

• 第一步：修改package.json配置
  新增gcp-build脚本，告知GAE部署时自动执行Vue打包命令，修改后的scripts字段如下：

"scripts": {
  "serve": "vue-cli-service serve /src/main.js",
  "build": "vue-cli-service build",
  "gcp-build": "npm run build",
  "start": "echo \"Static app, no server needed\""
}

• 第二步：重写app.yaml配置
  替换原有app.yaml全部内容，新增静态资源路由规则，让GAE直接托管Vue打包生成的dist目录资源：

runtime: nodejs12
env: standard
handlers:
  # 匹配所有静态资源，直接返回dist目录下的对应文件
  - url: /(.*\.(js|css|png|jpg|gif|ico|svg|woff|woff2|ttf|eot))$
    static_files: dist/\1
    upload: dist/.*\.(js|css|png|jpg|gif|ico|svg|woff|woff2|ttf|eot)$
  # 匹配所有其他请求，返回index.html适配Vue前端路由
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html
skip_files:
  - node_modules/

• 第三步：本地验证打包逻辑
  执行npm run build命令，确认项目根目录生成dist文件夹，且文件夹内包含index.html及对应的静态资源文件。
• 第四步：重新部署
  执行gcloud app deploy命令重新部署即可正常访问。

备选方案（使用Node服务托管静态资源） #

如果你不想配置静态资源路由，也可以通过引入轻量静态服务包实现部署：

1. 执行npm install serve --save将serve包加入生产依赖
2. 修改package.json的scripts字段，将start命令改为"start": "serve -s dist"
3. 保留原app.yaml的基础配置即可，无需添加handlers规则，重新部署即可生效。

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