Django พร้อม vue.js frontend - Static Files Path
ฉันกำลังพยายามให้บริการแอป django ด้วย vue frontend และต้องการความช่วยเหลือในการกำหนดค่าไฟล์คงที่
คำถาม TLDR:
ฉันจะทำให้ Django จดจำเส้นทางที่สร้างขึ้นนี้ได้อย่างไรว่าเป็นความพยายามในการเข้าถึงไฟล์แบบคงที่หรืออีกวิธีหนึ่งคือฉันจะแก้ไขเส้นทางการฉีดโพสต์บิวด์ที่ด้าน Vue ให้ตรงกับการตั้งค่าไฟล์คงที่ Django ปัจจุบันได้อย่างไร
Django ให้บริการ index.html ที่สร้างขึ้นจาก vue แต่ไม่พบไฟล์แบบคงที่ (สคริปต์ / 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
บิลด์ถูกเรียกใช้จากไดเร็กทอรีส่วนหน้าโดย - ไม่ทำความสะอาดเพื่อไม่ลบโฟลเดอร์เทมเพลต django ของฉันในบิลด์
นี่คือวิธีแก้ปัญหาของฉันสำหรับการเพิ่ม{% static %}แท็กไปยัง index.html ที่สร้างขึ้น ฉันตระหนักดีว่าฉันกำลังทำผิดกฎระเบียบที่มี assetsDir เป็นไดเร็กทอรีย่อยของ outputDir และฉันไม่เห็นด้วยกับการเพิ่ม staticfile dir อื่นใน settings.py เพื่อให้ตรงกับแบบแผน (แม้ว่าปัญหาของฉันจะยังคงเหมือนเดิม)
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
})
],
},
สาธารณะ / 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 / template / 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 ต้องมีการปรับเปลี่ยนเส้นทางสคริปต์ / css ที่สร้างขึ้นภายใน app / template / app / index.html
แทน <script src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}">
เส้นทางปัจจุบันต้องเป็น <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">
การเปลี่ยนพา ธ assetsDir ใน vue.config.js เพื่อให้ตรงกับหลักการ Vue ของการมีเนื้อหาเป็นไดเร็กทอรีย่อยของ outputDir ส่งผลให้เกิดปัญหาที่คล้ายคลึงกันซึ่งพา ธ'app/assets/js/...'แทนที่จะเป็น'js/...'
คำตอบ
ฉันตัดสินใจที่จะปรับเส้นทางที่โหลดลงในเทมเพลตระหว่างการสร้าง Vue โดยแก้ไขไฟล์ public / index.html รวมถึงตัวเลือก vue.config.js ฉันประกาศconst asset_dir = '/asset/dirใน vue.config.js แล้วเพิ่มสิ่งนี้เป็นตัวเลือกพิเศษให้กับ 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
})
],
}
}
สาธารณะ / 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>