vue-cli3引入第三方字体文件

1，在vue-cli项目目录下创建vue.config.js文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    }
}

2，在src目录下新建font目录，并创建font.css文件，并将字体文件放进该目录

font.css:

@font-face {  
    font-family: 'BEBA';
    src: url('BEBA.ttf');
}

3，在项目中引入，比如在APP.vue中引入，在子页面Index.vue中使用

APP.vue

<template>
  <div id="app">
    <router-link to="/Index">首页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less">
@import "./font/font.css";
</style>

Index.vue

<template>
    <div>
           首页
        <div class="tst">01</div>
    </div>
</template>
<style lang="less" scoped>
.tst{
    font-family: BEBA;
}
</style>

4，效果