Django avec interface vue.js - Chemin des fichiers statiques

Aug 19 2020

J'essaie de servir une application django avec une interface vue et j'ai besoin d'aide pour configurer les fichiers statiques.

La question TLDR:

Comment faire en sorte que Django reconnaisse ce chemin construit comme une tentative d'atteindre un fichier statique, ou comment puis-je modifier le chemin d'injection post-construction du côté Vue pour qu'il corresponde aux paramètres actuels du fichier statique Django?

Django sert l'index.html construit à partir de vue, mais il ne peut pas trouver les fichiers statiques (scripts / css) qui sont automatiquement injectés à partir du processus de construction car le chemin est "absolu". J'ai modifié la vue.config.js pour ne pas injecter automatiquement les scripts (car ils en auront besoin {% static %}pendant la construction, et le modèle index.html pour les ajouter de manière appropriée.

Ma structure de répertoires est la suivante:

- 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

La construction est exécutée à partir du répertoire du frontend, avec --no-clean pour ne pas supprimer mon dossier de modèles django lors de la construction.

Voici ma solution de contournement pour ajouter des {% static %}balises à l'index.html construit. Je me rends compte que je ne respecte pas la convention selon laquelle assetsDir est un sous-répertoire de outputDir, et je ne suis pas opposé à l'ajout d'un autre répertoire de fichier statique au settings.py pour correspondre à la convention (bien que mon problème soit toujours le même).

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>

L'index.html construit:

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>

Ma configuration django settings.py pour les fichiers statiques:

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

La façon dont mes localisateurs de fichiers statiques sont configurés via Django nécessite une modification des chemins de script / css intégrés dans app / templates / app / index.html.

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

Le chemin doit actuellement être <script src="{% static 'js/chunk-vendors.6a3b11f1.js' %}">

Changer le chemin assetsDir dans vue.config.js pour qu'il corresponde à la convention Vue selon laquelle les assets doivent être un sous-répertoire de outputDir entraîne un problème similaire dans lequel le chemin est 'app/assets/js/...'plutôt que'js/...'

Réponses

1 plum0 Aug 19 2020 at 03:16

J'ai décidé d'ajuster le chemin chargé dans le modèle lors de la construction de Vue en modifiant le fichier public / index.html ainsi que les options vue.config.js. J'ai déclaré un const asset_dir = '/asset/dirdans vue.config.js, puis je l'ai ajouté comme option supplémentaire au HtmlWebpackPlugin pour le tirer dans le modèle. Enfin, je sous-structure le chemin des fichiers statiques de la longueur de la partie inutile du chemin.