Python 部署Django、Django REST框架后端&；VueJS+；GCP应用程序引擎上的网页包前端（标准）

我有以下设置：

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

在本地开发人员设置中，一切正常。网页包加载程序查找并部署VueJS应用程序。 但部署到GAE时会引发以下错误：

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

它来自：

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

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

我也试着在只有静态的域上使用VueJS，但也失败了

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

My vue.config.js（来自其中一个教程）：

本地版本： npm--版本：7.3.0

---

vue--版本：@vue/cli 4.5.9

我通过以下方式解决了此问题：

• 将publicPath更改为@lhar建议的：

  publicPath:“/static/”

  （我的django配置有

  static\u URL='/static/'

  ）
• 删除django网页包加载程序
• 禁用生成文件的哈希：

  filenameHashing:false

  （现在无需执行此操作）
• 从引用静态资源的模板启动VueJS应用程序

我也不得不调整我的云构建，但最终它成功了

---

我发现了这篇非常有趣的文章：并将按照建议使用选项一，稍后将解决文件名哈希问题。

您能展示一下您的vue.config.js吗？我已经用vue.config.js更新了这个问题。我有一个Web包包-tracker@0.4.3version.your publicPath对于localhost，必须具有如下publicPath:publicPath:“请参阅，它没有帮助。”。我知道这需要更改，但这是VueJS将讨论的路径。问题是webpack-loader在文件webpack-stats.json中找不到信息，但我会在没有webpack-loader的情况下尝试一下。您可以查看

django manifest loader

。我构建它是为了替换django网页包加载器。它有一个更简单的配置，允许您轻松实现缓存破坏---

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',
    //     },
    // }
}