Vue 项目中的字体文件跨域问题

vue项目中，将页面和静态资源分开部署带来的问题，除了上一篇提到的特殊库(vue-pdf)中的跨域，还有本篇将要说的字体文件跨域；

背景

vue 项目中，通过 npm 安装的库，有一些（比如组件库 iview）中，会包含一些字体（iconfont）文件，当 html 页面和静态资源分开部署时，字体文件就会报跨域的错，不能加载到，导致页面上的图标显示不出来；这是因为默认情况下，字体文件不能跨域加载；

解决方案

解决方案有两种：

1、修改 webpack 配置文件

vue-cli 2.x 生成的项目中，打开 build/webpack.base.conf.js 文件，找到下面这段代码：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
},

这一段配置代码中，options 的配置参数 limit 表示以Data URL方式显示在文件（css）中的字节大小，如果超出，就生成单独的文件；详细解释请参照这里。

跨域只出现在：字体文件超出 limit 配置的数值，打包出了单独的文件这种情况，因为是单独引用的字体文件，所以就要受到跨域的限制了；

解决方案也就很明显了，一是把 limit 的值改大些；二是直接把整个 options 删除；最终生成的 css 代码中，如下图所示，字体文件都以 Data URL 的方式出现在 css 中。

字体文件常用的类型有 ttf、woff、woff2、svg、eot、otf 等，上面的两段配置代码中，svg 类型包含在了图片这个类别里（/.(png|jpe?g|gif|svg)(\?.*)?$/），如果直接删除了它的 options，就会导致项目中所有的图片都会以 Data URL 方式来加载，增大了 css 文件的体积；

可以把 svg 这类资源放到字体类别中，只修改字体类别的配置；

{
  test: /\.(png|jpe?g|gif)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
  loader: 'url-loader'
},

因为公司有单独的云存储，可以直接映射到CDN；实际开发中，我都把图片传云存储了，项目中是没有图片资源的；

2、开启静态资源所在服务器的跨域允许

如果静态资源所在的服务器可以自定义配置，可以在字体文件的响应头里加跨域允许： Access-Control-Allow-Origin: http://xx.com。

这样也可以解决字体跨域的问题。