在 GCP App Engine 上部署 Django、Django REST Framework 后端和 VueJS + webpack 前端（标准）

Question

我有以下设置：

• Django==3.1.4
• djangorestframework==3.12.2
• django-webpack-loader==0.7.0 （我不相信使用它 - 但这是另一个故事 - 只是为了好玩而学习）

在本地开发设置上一切正常。 Webpack-loader 查找并部署 VueJS 应用程序。 但是当部署到 GAE 时会抛出以下错误：

读取 /workspace/frontend/webpack-stats.json 时出错。你确定webpack已经生成了文件并且路径正确吗？

它来自：

/layers/google.python.pip/pip/lib/python3.9/site-packages/webpack_loader/loader.py，第 28 行，在 load_assets 中

我阅读了大量的教程。在本地开发上运行时一切都很清楚 - 同时启动 django 和 VueJS。 当然，问题是 webpack-stats.json 没有创建，因为 VueJS 服务器没有启动。我试图为此找到合适的解决方案，但失败了。

我也尝试过仅在具有静态的域上使用 VueJS - 但也失败了。

让基本的 VueJS 应用程序与 REST CRUDS 对话并在 GAE 上运行它的最佳解决方案是什么？

我的 vue.config.js（来自教程之一）：

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
    publicPath: "http://0.0.0.0:8080/",
    outputDir: "./dist/",
    chainWebpack: (config) => {
        config
            .plugin("BundleTracker")
            .use(BundleTracker, [{filename: "./webpack-stats.json"}]);

        config.output.filename("bundle.js");

        config.optimization.splitChunks(false);

        config.resolve.alias.set("__STATIC__", "static");

        config.devServer
             // the first 3 lines of the following code have been added to the configuration
            .public("http://127.0.0.1:8080")
            .host("127.0.0.1")
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .disableHostCheck(true)
            .headers({"Access-Control-Allow-Origin": ["*"]});
    },

    // uncomment before executing 'npm run build'
    // css: {
    //     extract: {
    //       filename: 'bundle.css',
    //       chunkFilename: 'bundle.css',
    //     },
    // }
}

本地版本： npm --版本：7.3.0 vue --version: @vue/cli 4.5.9

Answer 1

我设法通过以下方式解决它：

• 按照@lhar 的建议将publicPath 更改为：publicPath: "/static/"（我的django conf 有STATIC_URL = '/static/'）
• 删除 django-webpack-loader
• 禁用生成文件的散列：filenameHashing: false（现在不需要这样做）
• 从引用静态资源的模板启动 VueJS 应用

我的 Cloud Build 也必须进行调整，但最终它可以工作了。

我发现这篇非常有趣的文章：Using webpack with Django 并会按照建议使用选项一，稍后将解决文件名散列问题。