从文件系统加载页面时让 Vuetify 图标工作答案

【问题标题】：Get Vuetify icons to work when loading page from filesystem从文件系统加载页面时让 Vuetify 图标工作
【发布时间】：2019-11-19 22:36:06
【问题描述】：

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

我的项目要求我能够构建项目并输出单个 html 文件，以便可以在 phonegap 应用程序 (safari v13) 中下载和离线运行。我能够满足所有要求并使我的项目显示在 phonegap 应用程序中，但图标不呈现。例如，在我使用<v-icon>info</v-icon> 的地方，它将呈现INFO 等。

我已关注 Vuetify 快速入门、图标和浏览器支持页面以及其他几个 Stack Overflow 线程的答案，但无法渲染我的图标。

我基本上需要包含在我的单个文件中的字体。当我在 phonegap 应用程序中加载页面或从文件系统提供服务时，我在控制台(file:///D:/fonts/materialdesignicons-webfont.27cb2cf1.woff2) 中收到“未找到”错误知道路径是错误的，但我怎样才能让图标成为构建的一部分？

这可能吗？

为了获得带有 js 和 css 的单个 html 文件，我添加了 npm 包 html-webpack-plugin 和 html-webpack-inline-source-plugin，在我的 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',
  }
})

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

终于弄清楚如何使用method described here 来实现我所需要的工作。

 // plugins/vuetify.js

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

Vue.use(Vuetify)

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

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

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

【讨论】：