为什么给select下的options设置字体无效_Vue-cli3下引入字体以及骨架屏加载实践

本文主要分为两部分，一个是介绍vue-cli3下的webpack配置，一个是如何将外部字体文件引入进来。

全部代码见

Alfxjx/skeleton-vue-test​github.com

这个demo里面还测试了lazy-load

演示地址：

skeleton-test​alfxjx.github.io

求个star， 么么哒skeleton-test求个star， 么么哒

---

webpack 配置

Vue-cli3相比于cli2，大大简化了webpack的配置，这是一件好事，也给我带来了一些困扰，比如目前的网上的教程基本都是基于cli2的，很少有关于cli3的，在引入字体的时候，使用assetsPath方法就会报错。

我的解决方法是这样的：设置一个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]')
              }
            }
          ]
        }, 
    }
}

这样就成功了。

骨架屏

骨架屏选择的是这个vue-skeleton-webpack-plugin，使用方法见对应的项目地址，但是这样做了之后，运行npm run serve 的时候，会出现错误：

Entry module not found: Error: Can't resolve 'I:workspacevuesrcentry-skeleton.js' in 'I:workspacevueskeleton-test':
Error: Can't resolve 'I:workspacevuesrcentry-skeleton.js' in 'I:workspacevueskeleton-test'

检查了一下是路径有问题。

修改方法：

// in vue.config.js configureWebpack :{}
plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
          // 地址的解析是从根目录开始的。需要加上/skeleton-test/(项目名称)
              app: utils.resolve('./skeleton-test/src/entry-skeleton.js')
          }
        }
      })
],

全部代码见Github，这个demo里面还测试了lazy-load

求个star， 么么哒