Font resource file cannot be found after introducing iview, package

clipboard.png

clipboard.png

assetscss

:
main.jsiview

clipboard.png
node_module

clipboard.png

the background images that I use locally after packaging can be accessed normally. These font files are mainly used in the Icon component of iview

.
Apr.07,2021

files that you want to access directly through http are placed under the static folder


it is recommended that static resource files be placed in the static folder, so that webpack will not compile it and copy it directly into the corresponding folder.
by the way, you can post your lead-in road strength code to have a look.


take a look at the generated style file, you use the relative path when you develop, but the path you get after compilation is wrong. If you copy the font to the css folder, you might as well find the compiled path to fundamentally solve the problem.


maybe there is a problem configuring the font path
as you need, I tried it, normal
1.config url index.js-configure all font prefixes

  build: {
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    .....
    }
2.webpack.base.conf.js  
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
     }

3.webpack.base.conf.js configure rules for fonts

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

3.src use icon in ivew


4.npm run build fonts diststatics


clipboard.png
you can find the css file of iview in node_modules, search for the font file you use, change its path to the relative address without adding / or.. /, add the file to the folder name, and change the packing path to the beginning of your website's path, for example, my website is domain name / public/dist/html. Set the packing path to / public/dist/, because you are a relative path. When you pack, you will change the path, but the absolute path will not

.
Menu