Question

我有一个使用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',
  }
})

Answer 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>

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

1 个答案: