Vuetify3 图标在开发/构建后不显示

Question

我使用 Vue 和 Vuetify 构建我的应用程序，在 build/dev ("dev": "vue-cli-service build --dest=../static/ --mode=development --watch") 命令之后，我生成的文件消失了到静态目录 静态文件夹

然后我将它连接到我的html中 html

但在页面本身上，vuetify 图标和字体似乎根本没有加载 实际页面

vuetify.js

// Styles
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)

main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

webfontloader.js

/**
 * plugins/webfontloader.js
 *
 * webfontloader documentation: https://github.com/typekit/webfontloader
 */

export async function loadFonts () {
  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')

  webFontLoader.load({
    google: {
      families: ['Roboto:100,300,400,500,700,900&display=swap'],
    },
  })
}

那么，我如何正确地将它们加载到 html 中

我已经尝试过任何东西 - 通过 cdn 连接样式，重新安装所有依赖项等。

编辑：嗯，我通过修改 chunk-vendors.js 中的这一行来修复它 “字体/materialdesignicons-webfont.fbaef2a9.woff2”到“../static/fonts/materialdesignicons-webfont.fbaef2a9.woff2” 但这似乎不是一个很好的解决方案...... 我可以以某种方式更改构建过程并显示 chenk-vendors 应该在哪个文件夹中搜索我的字体吗？

Answer 1

由于您还没有发布您的 vite.config.js...

您添加

transformAssetUrls

配置了吗

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
import { fileURLToPath, URL } from 'node:url';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    vuetify({
      autoImport: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});