vue-cli项目引入字体包

vue-cli项目引入字体包

1.先下载字体文件所需的.ttf文件
2.将字体文件引入
自己在src文件定义一个common文件夹，在fonts文件夹放入下载好的.ttf文件，新建一个font.css文件
font.css文件代码

@font-face {
  font-family: "hyxm";
 // src: url('./hyxm.ttf');      //ttf文件路径
   src: url-loader('./hyxm.ttf');      //ttf文件路径需要用这个
  font-weight: normal;
  font-style: normal;
}

这里是fonts文件夹里面的，因为webpack.base.conf.js中的name匹配的是fonts文件夹

3.在APP.vue中引入

@import "./common/fonts/font.css";
#app {
  font-family: "hyxm";
}

4.在utils.js添加代码

   return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'                //添加这一行代码后再重新打包就可以了
      })

防止打包后路径报错问题