vue-cli3中字体引入

我的解决方法是这样的：设置一个utils对象，手动添加工具函数。

// vue.config.js
const utils = {
  assetsPath: function (_path) {
    const assetsSubDirectory = process.env.NODE_ENV === 'production'
        // 生产环境下的 static 路径
        ? 'static'
        // 开发环境下的 static 路径
        : 'static'

    return path.posix.join(assetsSubDirectory, _path)
  },
  resolve: function(dir) {
    return path.join(__dirname, '..', dir)
  }
}

这样一来就方便添加字体以及骨架屏（skeleton）了。

如何引入字体文件（ttf...)

我的方案是这样的：

• 首先把字体文件（.ttf之类的）放在src/common/font/下；
• 接着在font文件夹里面新建一个font.css:
• 在文件夹里面放好字体文件（Avinda.ttf)

@font-face{
    font-family: "avinda";
    // 路径为绝对路径
    src: url('Avinda.ttf')
}

• 在vue.config.js按照这样配置：

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

这样就成功了。

使用

<style>
 @import url('../../common/font/font.css');
.activaty-keyword-box {
        position: absolute;
        left: 30px;
        top: 310px;
        font-size: 25px;
        writing-mode: vertical-rl;
        font-family: avinda;
}
</style>