15

我有一个使用 VUE CLI 3.x 创建的正在开发中的 Vue / Vuetify 应用程序，并且希望在本地提供 Roboto 字体，而不是通过 Google cdn。

有没有人通过 webpack 和 vue cli 生成的 vuetify 应用程序项目实现了这一点，如果是这样，你是怎么做的？

4

2 回答 2

24

使用 Vue CLI 3 + Vuetify：

  • 安装字体机器人

      npm install --save typeface-roboto

  • 在public/index.html，删除

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

  • 中src/App.vue，添加

      <style lang="sass">
    @import '../node_modules/typeface-roboto/index.css'
  </style>
于 2019-10-18T09:40:05.810 回答
14

首先将包安装typeface-roboto到您的项目中。

然后将其导入您的 main.js/index.js/boot.js 或其他任何内容：

import 'typeface-roboto/index.css';

最后，更新您webpack.config.js以允许在模块规则中使用字体文件类型，即：

    module: {
        rules: [
            //other stuff
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },

字体文件类型为woff、woff2和.eotttf

于 2018-11-26T13:42:33.887 回答