问题描述
我正在尝试为带有vue前端的django应用提供服务,并且需要一些有关配置静态文件的帮助。
问题TLDR:
如何让Django将此构建路径识别为尝试访问静态文件的尝试,或者如何在Vue一侧修改后构建注入路径以匹配当前的Django静态文件设置? / p>
Django从vue提供已构建的index.html,但是由于路径为“绝对”,因此它无法找到从构建过程中自动注入的静态文件(脚本/ css)。我修改了vue.config.js使其不自动注入脚本(因为在构建过程中它们将需要{% static %}
,并且需要使用模板index.html来适当地添加它们。
我的目录结构如下:
- Root
- app
- migrations
- templates
- app (outputDir)
- index.html (Built from vue)
- base.html
- templateFolder1
- templateFolder2
- various .py files
- assets (assetsDir)
- css
- static files
- js
- static files
- frontend
- public
- index.html (Template for build for vue)
- src
- assets
- components
- App.vue
- main.js
从前端目录运行构建,使用--no-clean不会删除构建上的django模板文件夹。
这是我的解决方法,用于向构建的index.html中添加{% static %}
标签。我意识到我违反了惯例,已经发现assetDir是outputDir的子目录,并且我不反对在settings.py中添加另一个staticfile dir以符合惯例(尽管我的问题仍然相同)。
vue.config.js
publicPath: isProd ? '/app/' : '/',outputDir: __dirname + '/../app/templates/app',assetsDir: "../../../assets",indexPath: './index.html',configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',favicon: __dirname + '/../assets/img/favicon/favicon.ico',inject: false,minify: false
})
],},
public / index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '<%= htmlWebpackPlugin.files.favicon %>' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key] %>' %}"> <% } %>
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.js[key] %>' %}"></script> <% } %>
</body>
</html>
内置的index.html:
app / templates / app / index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static '/app/favicon.ico' %}">
<link rel="stylesheet" href="{% static '/app/../../../assets/css/chunk-vendors.0ba3e87d.css' %}"> <link rel="stylesheet" href="{% static '/app/../../../assets/css/app.fb012fc8.css' %}">
</head>
<body>
...
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}"></script> <script type="text/javascript" src="{% static '/app/../../../assets/js/app.45295baa.js' %}"></script>
</body>
</html>
我的django静态文件的settings.py配置:
Settings.py
...
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR,"assets")]
STATIC_ROOT = os.path.join(BASE_DIR,"staticfiles")
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
...
通过Django配置我的静态文件查找器的方式需要修改app / templates / app / index.html中的内置脚本/ css路径。
代替<script src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}">
当前路径应为<script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">
更改vue.config.js中的assetDir路径以匹配将资产作为outputDir的子目录的Vue约定会导致类似的问题,其中路径为'app/assets/js/...'
而不是'js/...'
>
解决方法
我决定通过修改public / index.html文件以及vue.config.js选项来调整在Vue构建期间加载到模板中的路径。我在vue.config.js中声明了const asset_dir = '/asset/dir
,然后将其作为附加选项添加到HtmlWebpackPlugin中以将其拉入模板。最后,我将静态文件的路径根据路径不必要部分的长度进行了字符串化。
vue.config.js
const asset_dir = "../../../assets"
module.exports = {
publicPath: isProd ? '/app/' : '/',outputDir: __dirname + '/../app/templates/app',assetsDir: asset_dir,indexPath: './index.html',configureWebpack: {
...
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',inject: false,minify: false,assetsDir: asset_dir
})
],}
}
public / index.html
{% load static %}
<% if (htmlWebpackPlugin.options['assetsDir'] !== undefined) { %> <% var assetDirLength = htmlWebpackPlugin.options['assetsDir'].length + htmlWebpackPlugin.files.publicPath.length + "/".length%> <% } %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MAPP Remote</title>
<link rel="shortcut icon" href="{% static 'img/favicon/favicon.ico' %}">
<% for (key in htmlWebpackPlugin.files.css) { %> <link rel="stylesheet" href="{% static '<%= htmlWebpackPlugin.files.css[key].substr(assetDirLength) %>' %}"> <% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Pulled from htmlWebpackPlugin Docs -->
<!-- https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html -->
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry.substr(assetDirLength) %>' %}"></script>
<% } %>
</body>
</html>