如何使用 Django 渲染 Vue
Posted
技术标签:
【中文标题】如何使用 Django 渲染 Vue【英文标题】：How to render Vue with Django 【发布时间】：2021-05-10 10:08:33 【问题描述】：我正在 Digitalocean 上使用 Vue.js 和 Django 开发一个小型应用程序，所以我还安装了 Django Webpack 加载器和跟踪器，现在我已经执行了我的 Django 服务器 和我的 vue。 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
【问题讨论】：
【参考方案1】：您应该首先创建 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',
// ,
//
;
然后从 webpack_loader 加载 render_bundle。您的 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>
确保您使用的是 @0.4.3 版本的 webpack-bundle-tracker
您可以关注this link获取分步教程。
【讨论】：
如何加载我的 javascript 文件和 CSS 你可以在django模板上加载css和js。你也可以在 vue 端添加 css 和 js以上是关于如何使用 Django 渲染 Vue的主要内容，如果未能解决你的问题，请参考以下文章