开发模式下如何动态修正woff文件的端口指向？

我基于GitHub仓库cookiecutter-vue-django搭建了Vue-Django架构，配置过程参考指定文章完成。在vue_frontend目录的main.js中引入了Quasar的material-icons.css（该文件包含woff字体文件），通过django-vue-utilities的vue_bundle_url模板标签将main.js注入Django模板。

环境问题表现 #

• 开发环境（npm run dev）：静态资源从http://127.0.0.1:5173/获取，main.css加载正常，但woff字体文件请求端口错误（未指向5173）。
• 生产环境：静态资源从http://127.0.0.1:8000/static/vue/获取，设置base: '/static/vue/'后woff文件加载正常，但该配置会导致开发环境失效。

问题根源推测 #

问题出在material-icon.css中的字体文件相对路径：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format('woff2'), 
  url('./web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');   /* 路径问题所在 */
}

相关配置文件 #

main.js #

import './assets/main.css'

import '@quasar/extras/material-icons/material-icons.css'; // 包含woff字体文件
import 'quasar/dist/quasar.css';
import 'quasar/src/css/index.sass';

import { Quasar } from 'quasar'
import AppHeader from './AppHeader.vue'
const header = createApp(AppHeader)
header.use(Quasar, {
  plugins: {} 
})

header.mount('#appheader')

Django模板 #

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


{% block content %}
<div id="appheader"></div>
{% endblock %}

{% block css %}

{% endblock %}

{% block inline_javascript %}

     {% comment %} 注入main.js {% endcomment %}
  <script type="module" crossorigin src="{% vue_bundle_url 'main' %}"></script> 

{% endblock inline_javascript %}

vite.config.js #

// vite.config.js
  base: '/static/vue/', // 该配置下生产环境woff文件加载正常，但开发环境失效
  build: {
    rollupOptions: {
      input: {
        main: resolve('./src/main.js'),
        main_header: resolve('./src/main_header.js'),
        reward: resolve('./src/reward.js')
      },
      output: {
        dir: '../my_project/static/vue/',
        entryFileNames: '[name].js',
      },
    },
  },

内容的提问来源于stack exchange，提问作者JAdel