在Google App Engine上对接Python后端（非Flask）与Vue.js前端

我来帮你搞定这个对接的难题！核心思路是把Vue项目打包成静态文件，然后让Python后端在用户访问时返回Vue的index.html，同时通过app.yaml配置好静态资源的路由，确保CSS、JS这些文件能正常加载。下面是具体步骤：

第一步：打包Vue.js项目 #

首先你需要把开发好的Vue项目编译成生产环境的静态文件。在Vue项目根目录下运行：

npm run build

执行完成后会生成一个dist文件夹，里面包含了index.html和static子目录（存放CSS、JS、图片等资源）。

第二步：调整Python后端代码 #

因为你用的是非Flask的Python后端，这里以GAE常用的webapp2（Python2.7）和WSGI（Python3）为例，写一个处理所有请求并返回Vueindex.html的handler：

示例1：Python2.7 + webapp2 #

创建main.py文件，内容如下：

import webapp2
import os

class VueAppHandler(webapp2.RequestHandler):
    def get(self):
        # 定位到dist文件夹下的index.html
        index_file_path = os.path.join(os.path.dirname(__file__), 'dist', 'index.html')
        with open(index_file_path, 'r') as f:
            self.response.write(f.read())
        # 设置正确的Content-Type，确保浏览器正确解析HTML
        self.response.headers['Content-Type'] = 'text/html; charset=utf-8'

# 配置路由：所有路径都指向这个handler，支持Vue的前端路由
app = webapp2.WSGIApplication([
    ('/', VueAppHandler),
    ('/.*', VueAppHandler),  # 匹配所有URL，解决单页应用路由刷新404的问题
], debug=True)

示例2：Python3 + WSGI #

如果用Python3环境，创建main.py：

import os

def application(environ, start_response):
    # 读取Vue的index.html文件
    index_path = os.path.join(os.path.dirname(__file__), 'dist', 'index.html')
    with open(index_path, 'rb') as f:
        content = f.read()
    
    # 返回响应
    status = '200 OK'
    headers = [('Content-Type', 'text/html; charset=utf-8')]
    start_response(status, headers)
    return [content]

第三步：配置app.yaml #

接下来要在app.yaml里设置静态资源的映射，让GAE直接处理CSS、JS等静态文件，动态请求交给Python后端处理：

Python2.7版本的app.yaml #

runtime: python27
api_version: 1
threadsafe: true

handlers:
# 处理Vue打包后的静态资源（static目录下的文件）
- url: /static
  static_dir: dist/static

# 处理其他静态文件（比如favicon.ico、manifest.json等）
- url: /(.*\.(ico|json|png|jpg|jpeg|gif|svg|txt))$
  static_files: dist/\1
  upload: dist/(.*\.(ico|json|png|jpg|jpeg|gif|svg|txt))$

# 所有其他请求都交给Python后端处理，返回Vue的index.html
- url: /.*
  script: main.app

Python3版本的app.yaml #

runtime: python39  # 根据你使用的Python版本调整，比如python310

handlers:
# 静态资源路由
- url: /static
  static_dir: dist/static

- url: /(.*\.(ico|json|png|jpg|jpeg|gif|svg|txt))$
  static_files: dist/\1
  upload: dist/(.*\.(ico|json|png|jpg|jpeg|gif|svg|txt))$

# 动态请求自动映射到WSGI应用
- url: /.*
  script: auto

第四步：部署与验证 #

把main.py、app.yaml和dist文件夹放在同一目录下，然后用Google Cloud SDK部署：

gcloud app deploy

部署完成后访问你的GAE域名，就能看到Vue的Hello World应用了！

关键注意事项 #

• Vue的publicPath配置：如果你的应用部署在GAE的根路径，确保Vue项目的vue.config.js里设置publicPath: '/'，这样静态资源的路径才会正确。
• 前端路由兼容：配置('/.*', VueAppHandler)是为了解决Vue单页应用刷新页面时出现404的问题，让所有路由请求都返回index.html，由Vue前端路由处理。
• 静态资源缓存：如果需要优化静态资源的缓存，可以在app.yaml的静态资源handler里添加expiration参数，比如expiration: "365d"。

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