Question

我目前正在使用一个Vue.js前端与Flask后端充当REST API的Web应用程序。它们分别在我的仓库中分为客户端和服务器文件夹。我希望通过Github部署功能将其部署到Heroku，但遇到一些错误和需要澄清的问题。

所有代码都可以在此Github存储库中找到：https://github.com/justintranjt/thrive-test

在开发中，我一直在像这样运行应用程序：

在一个终端中运行 thriveApp.py 。在另一个终端中，运行 npm运行dev 。导航到正在运行本地服务器的localhost：8080 Vue.js应用程序。

应用程序将在Heroku上运行吗？还是使用 npm run build 运行Vue应用程序？在那种情况下，我必须将生成的构建文件夹放入Flask应用程序中，对吗？

此外，我在前端和后端之间的一些链接指定本地工作的localhost：8080和localhost：5000（8080是Vue，5000是Flask）。但是部署到Heroku上可以正常工作吗？
```
<b-form>
    <b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
```

如您所见here，我在Vue应用程序中有一个按钮，该按钮链接到由Flask应用程序路由的登录页面。在Heroku上运行时，我是否必须更改URL中表示 localhost：5000 的部分？

最后，当我当前尝试在Heroku上构建应用程序时，仅将代码的Python部分识别为package.json指定的Vue应用程序中的模块，而未安装require.txt指定的Python插件， Heroku。

我感觉所有这些问题通常都是相互关联的。关于Heroku部署的任何其他建议或技巧也将有所帮助，因为我目前对部署非常困惑。

Answer 1

应用程序将在Heroku上运行吗？

不！ npm run dev在开发模式下通过vue启动了整个开发服务器，并进行了热重载。这会带来很多开销，尤其是在文件大小方面。

还是使用npm run build运行Vue应用程序？

种类。 Vue完全不需要在您的服务器上运行，而是全部在客户端。 npm run build会将文件打包并缩小到dist文件夹，您将只剩下html，css和javascript-这是生产环境中需要的所有前端代码-无需部署任何源文件。您需要做的就是从任何服务器提供这些静态文件。可以由您的烧瓶或仅由任何apache，nginx等完成。

但是将其部署到Heroku上可以正常工作吗？

设置起来非常棘手。这就是为什么我不将前端和后端部署在同一台（虚拟）服务器上的原因之一。

package.json指定的Vue应用程序中的模块未安装

如果部署捆绑的前端而不是源代码，这将不再是问题。我仍然建议从其他环境中服务前端。

Heroku部署混乱：Vue.js前端与Flask后端

1 个答案: