Question

在过去的几年里，我总是使用Angular 1.x作为我的前端，就像当时包含一个JS文件一样简单。现在随着Angular，React和其他类型的TypeScript的兴起，现在需要一个专用的NPM构建服务，它将源代码编译成vanilla JavaScript，然后作为独立项目提供给前端。如果我对此的理解有任何缺陷，请纠正我。

目前我将Django用于我的所有后端应用程序，特别是一个REST框架，它将使前端能够用作SPA。我喜欢Vue.js作为我的首选武器。我的问题是（请原谅我，如果它看起来有点过于宽泛）我如何设置我的项目并正确配置它，以便我不为前端和后端运行两个服务器？

再说一次，在Angular 1.x和vanilla JavaScript的时代，我所要做的就是在后端的静态文件文件夹中包含一个缩小的angular.js，而Vue的独立版本也是如此。现在我很困惑什么是什么以及如何正确设置一个完整的堆栈项目。如果你们这些人可以权衡，我会非常感激。提前谢谢！

npm run dev # running the frontend for Vue.js

manage.py runserver # and a Django DRF backend

Answer 1

[免责声明：经过一番研究后，这只是我的理解。希望它有所帮助。]

现在看来，在创建具有各种框架的前端时，现在有一个构建步骤。只有在对前端进行更改时才需要执行此步骤，例如：您更新TypeScript或模板，然后将它们构建/捆绑到一些js pakage中。我相信你可以在你的开发机器上做到这一点。然后，您可以像以前一样静态地提供输出js。

我相信存在前端服务器以简化流程。因此，当您对前端进行更改时，不是在家中运行构建并手动将输出添加到静态文件，服务器将自动获取输入文件并刷新输出js。但这不是必需的。

您仍然可以通过简单地链接到它来使用vue.js：

直接包含

只需下载并附带脚本标记即可。 Vue将被注册为全局变量。

https://vuejs.org/v2/guide/installation.html

我建议您研究该页面以了解使用vue.js的其他方法以及npm，WebPack和Browserify的文档，然后发布更具体的问题还是输了。

Answer 2

如果您想使用webpack模板执行功能齐全的VueJS项目，您可以执行以下操作：在不同的端口上运行服务器和客户端应用程序，并使用proxyTable代理所有服务器请求（如API） webpack config。

以下是详细步骤：

步骤1：在单独的文件夹/终端窗口中创建您常用的Python服务器（或任何其他服务API，静态文件等的服务器）。我们假设它在端口8080上运行。因此，您的开发服务器可以在http://localhost:8080处获得，这也有望为某些api请求提供服务。

步骤2：在不同的文件夹中创建您的VueJS项目（最好使用webpack模板）。当您运行npm run dev时，您的客户端应用程序将在http://localhost:4200处可用（默认的网络包设置）。在您完成下面的步骤3之前，请不要启动您的客户端应用程序。

步骤3：现在打开配置文件：VueJS_Webpack_Project_Folder/config/index.js并设置proxyTable，如下所示：

...
...
module.exports = {
    build: {...},
    dev: {
        ...,
        port: 4200,
        ...,
        proxyTable: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true
            },
            '/static': {
                target: 'http://localhost:8080',
                changeOrigin: true
            }
        },
        ...
    }
}
...

如上所示，转到/api和/static的所有请求都会重定向到服务器。这只是一个示例，您可以代理与您的设置相关的更多请求。

如果您的服务器在4200上运行，或者您的开发设置中有多个VueJS应用，也可以更改端口。

步骤4：现在您可以最终启动Python服务器（您的开发服务器）和Webpack服务器（VueJS客户端应用程序）并进行常规开发。

编辑：部署应用的最后步骤

完成开发后，当您最终运行npm run build时，它将在您的VueJS项目设置中创建一个dist文件夹，其中包含缩小的构建文件，如vendor.hash.js，{{ 1}}等等。

您需要将这些构建文件复制到Django服务器设置中的正确文件夹中。您可以手动执行此步骤，也可以只编写一个删除旧构建文件的python脚本，并将新构建文件复制到正确的文件夹中。

编辑2：解释上述设置的原因

我们必须执行上述所有复杂步骤的原因是：

今天我们可以使用Django。明天我们可能会将服务器端技术更改为其他技术，甚至可能会无服务器。为了确保我们的客户端应用程序在此迁移过程中不受影响，保持其独立性符合我们的最佳利益。
服务器和客户端具有不同的角色：服务器处理数据库，API，用户会话，身份验证等。客户端应用程序只关注具有正确的用户体验。因此，它有助于分离这些环境。
使用webpack模板的VueJS是一种非常强大的VueJS开发方式。您可以立即在浏览器中更改代码并查看结果，甚至无需刷新。您将获得详细的错误日志或警告，使您可以立即修复错误，而无需进行完整构建。使用VueJS + webpack时，开发周期会显着缩短。让它正常工作的唯一方法是将它作为一个独立的项目。

还有一些非技术原因：

保留单独的客户端有助于将来拆分工作。在一个小项目中，单个开发人员可以同时进行客户端和服务器开发。稍后当项目取得巨大成功时，一个单独的团队将处理服务器，而另一个团队将处理客户端应用程序。将它耦合会导致很多同步问题。
最后，当你最终有一个巨大的创收项目时，你不会让开发人员使用Django + VueJS技能。开发人员（与技术创始人不同）一次关注一种特定技术。当您有两个完全符合常规开发流程的不同项目时，您的团队可以快速提升并快速完成任务。

使用Python进行完整堆栈设置

2 个答案: