Fatal编程技术网
  • django/
  • 如何使用Django渲染Vue

如何使用Django渲染Vue

django vue.js

如何使用Django渲染Vue,django,vue.js,Django,Vue.js,我正在Digitalocean上使用Vue.js和Django开发一个小应用程序，因此我安装了Django Webpack loader和跟踪器，现在，我已经使用npm run serve执行了我的Django服务器和我的vue.js，当我访问我的网页localhost:8000时，我只看到一个空白页，因为所有内容都已正确安装，这是我的HTML页（当我在chrome浏览器上检查时） 您应该首先创建vue.config.js文件来配置vue应用程序。 vue.config.js： const Bu

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

您应该首先创建vue.config.js文件来配置vue应用程序。 vue.config.js：

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',
  //     },
  // }
};
然后从网页包加载程序加载渲染包。您的django模板如下所示：

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- This part is in the screenshot at the bottom! -->
    <h1>Vue JS</h1>
    <div id="app"></div>
    {% render_bundle 'app' %}
  </body>
</html>

{%loader\u bundle from webpack\u loader%}
文件
Vue JS
{%render_bundle'应用程序'%}
确保您正在使用版本为@0.4.3的webpack bundle tracker
您可以按照步骤学习教程。

谢谢，上帝保佑您最受欢迎的Buddy我如何加载我的javascript文件和CSSY您可以在django模板上加载css和js。您还可以在vue端添加css和js 
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',
  //     },
  // }
};

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- This part is in the screenshot at the bottom! -->
    <h1>Vue JS</h1>
    <div id="app"></div>
    {% render_bundle 'app' %}
  </body>
</html>