Vue.js ön uçlu Django - Statik Dosya Yolu

Aug 19 2020

Bir django uygulaması bir vue ön ucu ile sunmaya çalışıyorum ve statik dosyaları yapılandırmak için biraz yardıma ihtiyacım var.

Soru TLDR:

Django'nun bu yerleşik yolu statik bir dosyaya ulaşma girişimi olarak tanımasını nasıl sağlayabilirim veya alternatif olarak, Vue tarafındaki derleme sonrası enjeksiyon yolunu mevcut Django statik dosya ayarlarıyla eşleşecek şekilde nasıl değiştirebilirim?

Django, vue'dan yerleşik index.html dosyasını sunar, ancak yolun "mutlak" olması nedeniyle oluşturma sürecinden otomatik olarak enjekte edilen statik dosyaları (betikler / css) bulamaz. Vue.config.js'yi komut dosyalarını otomatik olarak enjekte etmeyecek şekilde değiştirdim (çünkü bunlar {% static %}oluşturma sırasında ihtiyaç duyacaklar ve bunları uygun şekilde eklemek için şablon index.html.

Dizin yapım aşağıdaki gibidir:

- 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

Derleme, derlemedeki django şablonları klasörümü silmemek için --no-clean ile çalıştırılır.

İşte {% static %}yerleşik index.html'ye etiket eklemek için benim geçici çözümüm. Kuralı bozduğumu fark ettim, assetsDir'in outputDir'in bir alt dizini olduğunu ve kuralı eşleştirmek için settings.py'ye başka bir statik dosya dizini eklemeye karşı değilim (sorunum hala aynı olsa da).

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>

Yerleşik 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 statik dosyalar için yapılandırmam:

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"
...

Statik dosya bulucularımın Django aracılığıyla yapılandırılma şekli, app / templates / app / index.html içindeki yerleşik script / css yollarında değişiklik yapılmasını gerektiriyor.

Onun yerine <script src="{% static '/app/../../../assets/js/chunk-vendors.6a3b11f1.js' %}">

Yol şu anda olmalı <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">

Vue.config.js içinde assetsDir yolunu değiştirme varlıklar yolu olduğu benzer sayısında outputdir sonuçların bir alt dizin olmak zorunda Vue kongre maç için 'app/assets/js/...'yerine'js/...'

Yanıtlar

1 plum0 Aug 19 2020 at 03:16

Vue derlemesi sırasında şablona yüklenen yolu, public / index.html dosyasını ve vue.config.js seçeneklerini değiştirerek ayarlamaya karar verdim. const asset_dir = '/asset/dirVue.config.js'de bir ilan ettim ve bunu şablona çekmek için HtmlWebpackPlugin'e ekstra bir seçenek olarak ekledim. Son olarak, statik dosyaların yolunu, yolun gereksiz kısmının uzunluğuna göre alt diziyorum.