Vue.js Vue Cli 3本地字体未加载

try 在Vue CLI 3中加载自定义本地字体时，字体仍然不会显示.我没有收到任何错误消息.inspector显示加载了正确的规则，但#应用程序上的字体会回落到serif.字体没有显示在my dist文件夹的任何位置.

我try 过在vue中添加加载程序.配置.js，更改url路径，将@font-face规则移动到不同的位置，将公共路径更改为""和"/"，将SCS导入到主目录中.js.

字体加载:

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

并在应用程序内使用.vue:

<style lang="scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

这个样式放在我的main.scss文件中.文件 struct 如下所示:

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.js文件如下:

module.exports = {
  publicPath: '/',
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  configureWebpack: {
    module: {
      rules: [{
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      }]
    }
  }
}

我还try 了vue.config.js年的chainWebpack，但没有成功:

chainWebpack: config => {
    config
      .module
      .rule("file")
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: 'assets/fonts/[name].[ext]'
      })
      .end();
  }