Python Vue 部署与联调测试

该项目的目录结构如下

backend/
frontend/

backend 目录是后端的 Python 应用，用于给Vue提供相关的API服务
frontend 目录就是一个Vue应用

使用vue init webpack frontend，初始化Vue项目目录。

在frontend中执行npm run build，会构建编译生成一个dist目录，就是其相关的静态文件组，以下我们来展示一下如何应用。

在backend目录中，初始化Tornado Web，直接从官方扒下来的示例

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")

def make_app():
    return tornado.web.Application([
        (r"/", MainHandler),
    ])

if __name__ == "__main__":
    app = make_app()
    app.listen(8888)
    tornado.ioloop.IOLoop.current().start()

关于Vue相关的静态文件处理，就是要在Tornado Web中的路由部分，引用其构建编译生成的静态文件。

import os
 
def make_app():
    current_path = os.path.dirname(__file__)
    return tornado.web.Application([
        (r"/api/index", MainHandler),
        (r'^/()$', StaticFileHandler, {"path":os.path.join(current_path, "frontend/dist"), "default_filename":"index.html"}),
        (r'^/(.*)$', StaticFileHandler, {"path":os.path.join(current_path, "frontend/dist")}
    )],

脚本参数说明

• 其中current_path变量指向该项目的根目录
• 通过路由的default_filename参数，指定该条记录默认的访问的HTML路径

以上配置就能将Tornado和Vue部署在同一个服务中。

接下来就有另一个问题，我们不可能在开发过程中，每次都构建之后，再重新运行Python服务，那是很痛苦的，所以我们准备在Vue开发环境服务中配置跨域，然后两个服务各自监听端口，进行联调测试。

我们编辑配置frontend/config/index.js，找到proxyTable字段，修改如下：

proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:8888/',  
  },
},

其中target字段就是我们运行的Tornado服务，我们在Vue项目中访问路径/api/index，即可调用之前预设的HelloWorld接口。