Vue CLI Webpack环境引入Font Awesome遇TTF文件解析错误求助

Hey there! That error pops up because Webpack doesn’t natively handle font file types like .ttf—we need to add specific loaders to process these binary assets. Let’s fix this step by step:

1. Install Required Loaders #

First, grab the loaders that handle font files. Run this in your project terminal:

npm install url-loader file-loader --save-dev

2. Configure Webpack Based on Your Vue CLI Version #

For Vue CLI 3+ (Using vue.config.js) #

If you’re on the newer Vue CLI setup, create or update the vue.config.js file in your project root with this rule:

module.exports = {
  chainWebpack: config => {
    // Add rule to process font files
    config.module
      .rule('fonts')
      .test(/\.(ttf|woff|woff2|eot|otf)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192, // Convert fonts smaller than 8KB to base64 strings
        name: 'fonts/[name].[hash:8].[ext]', // Output path/filename pattern
        esModule: false // Fixes Vue-specific asset handling quirks
      })
      .end()
  }
}

For Older Vue CLI (Using webpack.config.js) #

If you’re working with a direct Webpack config file, add this rule to the module.rules array:

module.exports = {
  // ... other existing config settings
  module: {
    rules: [
      // ... your existing loaders (e.g., babel, css)
      {
        test: /\.(ttf|woff|woff2|eot|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]',
              outputPath: 'fonts/' // Where font files will live in your dist folder
            }
          }
        ]
      }
    ]
  }
}

3. Verify Your Font Awesome Import #

Double-check that you’re importing the Font Awesome CSS correctly in main.js (alongside your Vuetify styles):

import 'vuetify/dist/vuetify.min.css'
import 'font-awesome/css/font-awesome.css' // This line is crucial!

4. Restart Your Dev Server #

Stop your current development server and fire it up again—Webpack needs to reload with the new configuration to apply the changes.

That should squash the "Unexpected character" error and get your Font Awesome icons working as expected!

内容的提问来源于stack exchange，提问作者bluelemonade