为什么ttf字体不能与Vue CLI一起使用？

Question

我正在使用Vue CLI，我想使用从Internet下载的字体。我想我已经配置了所有东西，但是那根本不起作用。

项目的结构如下：

+--node_modules
+--public
|  +--index.html
+--src
|  +--assets
|  |  +--css
|  |  +--font
|  |  |  +--font.css
|  |  |  +--FZYXJW.ttf
|  +--components
|  +--App.vue
|  +--main.js
+--babel.config.js
+--vue.config.js
+--package.json

以下是相关代码：

// font.css
@font-face {
  font-family: 'Youxian';
  src: url("FZYXJW.ttf");
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
        .rule('font')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .end()
  }
};

// App.vue
<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}

</script>

<style>
  @import "/assets/font/font.css";

  #app {
    font-family: 'Youxian';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

</style>

我希望字体更改为“ Youxian”，但实际上什么也没发生。