Javascript 从文件系统加载页面时让Vuetify图标正常工作

我有一个使用vue cli 3创建的vue项目，我正在使用Vuetify v2.0.19

我的项目要求我能够构建项目并输出单个html文件，以便可以在phonegap应用程序（safari v13）中下载并脱机运行。我能够满足所有要求，并让我的项目显示在phonegap应用程序中，但图标不会呈现。例如，在我使用

info

的地方，它将呈现信息等

我遵循了Vuetify快速入门、图标和浏览器支持页面以及其他几个堆栈溢出线程的回答，但无法呈现我的图标

我基本上需要单个文件中包含的字体。当我在phonegap应用程序中加载页面或从文件系统提供服务时，控制台中会出现“找不到”错误

(file:///D:/fonts/materialdesignicons-webfont.27cb2cf1.woff2）

我知道路径是错误的，但是如何才能使图标成为构建的一部分

这可能吗

为了使用js和css获取单个html文件，我添加了npm包

html网页包插件

和

html网页包内联源插件

，在我的

vue.config.js中，我有以下内容：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'output/output.html',
          template: 'src/output-template.html',
          inlineSource: '.(js|css)$' // embed all javascript and css inline
        }),
        new HtmlWebpackInlineSourcePlugin()
      ]
    },
    transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
  }

在
src/plugins/vuetify.js中

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  }
})

最后，我想知道如何让它工作，我需要它使用

在我使用图标的组件中（例如使用mdi信息图标）


...
{{svgPath}}
...
从'@mdi/js'导入{mdiInformation}
导出默认值{
...
数据（）{
返回{
svgPath:mdi信息
}
}
}

 // plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg'
  }
})

<template>    
    ...
       <v-icon>{{svgPath}}</v-icon>
    ...
</template>
<script>
import {mdiInformation} from '@mdi/js'
  export default {
      ...
      data() {
          return {
              svgPath: mdiInformation
          }
      }
  }
</script>