vue-cli3 introduced fonts

My solution is this: setting a utilstarget, manually add utility functions.

// 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)
  }
}

In this way it is easy to add fonts, and screen skeleton (skeleton) a.

How to introduce the font file (ttf ...)

My plan is this:

• First, the font file (.ttf and the like) on the src/common/font/next;
• Then create a new folder inside the font font.css:
• Put the folder inside the font file (Avinda.ttf)

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

• In vue.config.jsthus configured according to:

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]')
              }
            }
          ]
        }, 
    }
}

This successful.

use

<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>