Vue2.0+webpack 引入字体文件（eot，ttf，woff）

北觅_小太阳2023-08-22 14:51

webpack.base.config.js

需要配置

复制代码

     {

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

如果 Vue2.0+webpack3.6引入字体文件（eot，ttf，woff）路径报错

复制代码

These relative modules were not found:

* ../fonts/music-icon.eot?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.svg?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.ttf?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.woff?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl

将font.css 路径修改为

复制代码

 src: url('/static/fonts/music-icon.eot?2qevqt')
  src: url('/static/fonts/music-icon.eot?2qevqt#iefix') format('embedded-opentype'),
          url('/static/fonts/music-icon.ttf?2qevqt') format('truetype'),
          url('/static/fonts/music-icon.woff?2qevqt') format('woff'),
          url('/static/fonts/music-icon.svg?2qevqt#music-icon') format('svg')