Django com frontend vue.js - Caminho dos arquivos estáticos

Aug 19 2020

Estou tentando servir um aplicativo django com um frontend vue e preciso de ajuda para configurar os arquivos estáticos.

A Questão TLDR:

Como faço para que o Django reconheça esse caminho construído como uma tentativa de acessar um arquivo estático ou, alternativamente, como modifico o caminho de injeção pós-construção no lado Vue para corresponder às configurações atuais do arquivo estático do Django?

Django serve o index.html construído a partir do vue, entretanto, ele não pode encontrar os arquivos estáticos (scripts / css) que são autoinjetados do processo de construção devido ao caminho ser "absoluto". Eu modifiquei o vue.config.js para não autoinjetar os scripts (uma vez que eles precisarão {% static %}durante a construção, e o template index.html para adicioná-los apropriadamente.

Minha estrutura de diretório é a seguinte:

- 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

A compilação é executada a partir do diretório frontend, com --no-clean para não excluir minha pasta de modelos django na compilação.

Aqui está minha solução alternativa para adicionar {% static %}tags ao index.html construído. Percebo que estou quebrando a convenção vue de que assetsDir é um subdiretório de outputDir, e não me oponho a adicionar outro dir staticfile ao settings.py para corresponder à convenção (embora meu problema ainda seja o mesmo).

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>

O index.html construído:

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>

Minha configuração do django settings.py para arquivos estáticos:

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

A forma como meus localizadores de arquivos estáticos são configurados através do Django requer modificação nos caminhos de script / css construídos dentro de app / templates / app / index.html.

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

O caminho atualmente precisa ser <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">

Alterar o caminho de assetsDir em vue.config.js para corresponder à convenção Vue de ter os ativos como um subdiretório de outputDir resulta em um problema semelhante em que o caminho é em 'app/assets/js/...'vez de'js/...'

Respostas

1 plum0 Aug 19 2020 at 03:16

Decidi ajustar o caminho que é carregado no modelo durante a construção do Vue, modificando o arquivo public / index.html, bem como as opções de vue.config.js. Eu declarei um const asset_dir = '/asset/dirin vue.config.js e, em seguida, adicionei isso como uma opção extra ao HtmlWebpackPlugin para puxá-lo para o modelo. Por último, coloco a substring do caminho para os arquivos estáticos pelo comprimento da parte desnecessária do caminho.