Question

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

有人通过webpack和vue cli生成的vuetify应用项目完成了这项工作吗？

Answer 1

首先将软件包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，eot和ttf。

Answer 2

使用Vue CLI 3 + Vuetify：

安装typeface-roboto
```
npm install --save-dev 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>

Vue CLI和Vuetify如何与本地Roboto字体一起使用

2 个答案: