如何将vue中的css注入到django模板中？

Question

我有 django 作为后端，vue 作为前端 - 使用来自 https://github.com/ilikerobots/cookiecutter-vue-django

的样板

我想将 quasar 集成到我的前端。这是我在

main.js

中的设置：

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { Quasar } from 'quasar'
import App from './App.vue'

import 'quasar/dist/quasar.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css'
import '@quasar/extras/bootstrap-icons/bootstrap-icons.css'

const app = createApp(App)

app.use(createPinia()).use(Quasar, {
  plugins: {}
})

app.mount('#app')

我将其注入到我的 django 模板中

header.html

:

{% extends "base.html" %}
{% load vue_utils %}


{% block content %}

<div id="app"></div>
{% endblock %}

{% block inline_javascript %}
  <script type="module" crossorigin src="{% vue_bundle_url 'main' %}"></script>
{% endblock inline_javascript %}

这是我的 vue 组件 -

App.vue

:

<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/page1" label="Page One" />
        <q-route-tab to="/page2" label="Page Two" />
        <q-route-tab to="/page3" label="Page Three" />
      </q-tabs>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" behavior="desktop" elevated>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { ref } from 'vue'
console.log("HERE")
export default {
  setup () {
    const leftDrawerOpen = ref(false)

    return {
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>

通过 django 模板传递和渲染时的外观：

Answer 1

我的 JavaScript 文件在

header.html

中找不到我的 Django 模板中的

.woff

文件。

发生这种情况是因为在

main.js

中，它没有使用正确的路径：

src:url(/assets/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ-4a4dbc62.woff2)

正确的路径应该是：

src:url(static/vue/assets/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ-4a4dbc62.woff2)

为了解决这个问题，我在我的

base

文件中添加了

vite.config.js

：

  base: '/static/vue/', // Ensures all asset paths include /static/vue/
  build: {
    rollupOptions: {
      input: {
        main: resolve('./src/main.js'),
        reward: resolve('./src/reward.js'),
      },
      output: {
        dir: '../fundamentalysis_project/static/vue/',
        entryFileNames: '[name].js',
      },
    },
  },

再次运行

npm run build

后，找到了正确的路径。