引入iview,打包后字体资源文件找不到位置

Question

打包目录

如何让打包后文件位置指向对应位置

现在临时解决方案是把assets这个文件夹复制到css文件夹下

补充说明:
我是在main.js全局引用iview

字体文件是node_module依赖里面的

打包后我本地使用的背景图是可以正常访问的，这些字体文件主要是使用iview的Icon组件中用到

Answer 1

可能是配置字体路径有问题
按你的需要我试了下，正常
1.config/index.js----配置所有url的前缀

  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 配置字体的rules

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

3.src中使用ivew中的icon


4.npm run build 之后fonts文件夹就放在 dist下的statics中

Answer 2

想通过http 直接访问的文件，就放在static文件夹下

Answer 3

建议把静态资源文件放在static文件夹，这样webpack就不会编译它，直接复制到对应文件夹里面的。
顺便，你可以把你的引入路劲代码贴出来看看。

Answer 4

你看下生成的样式文件，你在开发的时候路径用的是相对路径，但是编译完之后得到的路径是不对的，你把字体复制到css文件夹中，不如找一下编译后的路径，从根本上解决问题。

Answer 5

你可以在node_modules ，里找到iview的css文件， 搜索你用到的字体文件 ，将其路径改为相对地址前面不要加/ 或者../ ， 就文件夹名加文件 ， 打包的路径 改成你网站的跟路径开始 ， 比如 我的网站是 域名/public/dist/html ， 就把打包的路径设为 /public/dist/ ， 因为你是相对路径 ，打包的时候，会给你修改路径 ，绝对路径则不会