vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

这是一个常见的问题，通常是因为打包后的字体路径不正确导致的。以下是解决这个问题的完整攻略：

问题分析

首先，我们需要分析问题的原因。这个问题通常是由于字体文件路径不正确导致的。在开发环境下，字体文件会被正确加载，但是在打包后部署到服务器上时，字体文件的路径可能会错误地指向本地资源而无法加载。因此，我们需要确保字体文件在打包后可以正确被访问到。

解决方法

下面提供两种解决方法：

方法一：使用Webpack的CopyWebpackPluign插件

这个解决方法通过使用CopyWebpackPlugin插件将字体文件直接复制到打包后的目录下，确保字体文件可以正确被访问到。

首先安装CopyWebpackPluign插件：

npm install copy-webpack-plugin --save-dev

然后在webpack的配置文件中添加如下代码：

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/assets/fonts',
          to: 'fonts'
        }
      ]
    })
  ]
}

上面的代码将src/assets/fonts目录下的所有字体文件复制到了打包后的输出目录下的fonts目录中。

方法二：在CSS文件中使用相对路径

这个解决方法是通过在CSS文件中使用相对路径引用字体文件，确保字体文件可以正确地被加载。

例如，在CSS文件中引用字体文件：

@font-face {
  font-family: 'custom-font';
  src: url('./fonts/custom-font.ttf') format('ttf');
}

上面的代码使用相对路径引用了src/assets/fonts/custom-font.ttf文件。

确保在webpack的配置文件中启用loader解析TTF文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'fonts',
          },
        },
      },
    ],
  },
};