确保您使用的是@0.4.3 版本的 webpack-bundle-tracker

Question

我正在 Digitalocean 上使用 Vue.js 和 Django 开发一个小型应用程序，所以我还安装了 Django Webpack 加载器和跟踪器，现在我已经执行了我的 Django 服务器 和我的 vue。我的 Node.js 也使用 npm run serve，当我访问我的网页 localhost:8000 时，我只看到一个空白页面，因为一切都安装正确，这是我的 HTML 页面（当我在 chrome 浏览器上检查时） >

<html>
    <head>
            <title>Title of the document</title>  
    </head>
    
    <body>
        
            <div id="app"></div>
    
        <script type="text/javascript" src="http://0.0.0.0:8080/js/app.js"></script>
        
    </body>
    
 </html>

PS：我认为问题出在 app.js 中（因为我点击了链接，但出现错误）

This site can’t be reachedThe webpage at http://0.0.0.0:8080/js/app.js might be temporarily down or it may have moved permanently to a new web address.
ERR_ADDRESS_INVALID

Answer 1

你应该首先配置你的 vue 应用程序，创建 vue.config.js 文件。 vue.config.js:

//p[    preceding-sibling::h5[starts-with(normalize-space(),'SUBJECT:')]
    and following-sibling::h5[normalize-space()='Tender’s Files,']
    and not(preceding-sibling::h5[normalize-space()='Tender’s Files,'])]

然后从 webpack_loader 加载 render_bundle。您的 Django 模板将类似于：

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

module.exports = {
  // on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
  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',
  //     },
  // }
};

确保您使用的是@0.4.3 版本的 webpack-bundle-tracker

您可以按照 this link 获取分步教程。

如何使用 Django 渲染 Vue

1 个答案:

确保您使用的是@0.4.3 版本的 webpack-bundle-tracker