Iview: 打包到生产环境时， woff 字体引用问题

Created on 28 Mar 2017 · 15Comments · Source: iview/iview

iView 版本号

2.0.0-rc.6

操作系统/浏览器版本号

macOS/Chrome 57

Vue 版本号

2.2.1

能够复现问题的在线示例（重要）

复现步骤

问题现象，以及你期望的结果是怎样的?

使用 vue build 之后做网站请求，发现 woff 字体无法获取，调试发现：

真实路径应该是
http://keliupc.mncats365.com/static/fonts/ionicons.05acfdb.woff
浏览器实际加载路径为：
http://keliupc.mncats365.com/static/css/static/fonts/ionicons.05acfdb.woff

导致 woff 字体获取不到。

你估计可能的原因是什么（选填）？

我看了下打包完的 css 文件是这样的，

url(static/fonts/ionicons.05acfdb.woff) format("woff"),

是相对路径，css 所在路径是 /static/css/ 。而加上上面的相对路径，就变成了/static/css/ + static/fonts/ionicons.05acfdb.woff = /static/css/static/fonts/ionicons.05acfdb.woff 导致加载错误。我现在都是手动改的，请问有没有方法解决一下这个问题？

Source

malaimoo

Most helpful comment

@JuZiSang
在 build/webpack.prod.conf.js 中

  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: false
    })
  },

extract :true 改为 fasle

malaimoo on 4 May 2017

👍39 😄5

All 15 comments

这是你配置问题吧，跟 iView 无关。

icarusion on 28 Mar 2017

用的 vue-cli 的脚手架，应该是脚手架的 webpack 配置有点问题。Thanks！

malaimoo on 28 Mar 2017

我用vue-cli也遇到这个问题，现在也是手动解决的...有什么其他方法吗？

JuZiSang on 4 May 2017

@JuZiSang
在 build/webpack.prod.conf.js 中

  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: false
    })
  },

extract :true 改为 fasle

malaimoo on 4 May 2017

👍39 😄5

解决了，感谢

JuZiSang on 5 May 2017

@malaimoo 666

hegoku on 20 Jul 2017

@malaimoo 666，字体这个解决了。但是背景图片路径也有问题。background:url(static/img/login.63c597e.jpg) no-repeat top/1920px 600px
缺了dist这一层

Tilang on 10 Aug 2017

@Tilang 不需要 dist 啊，dist 是打包之后的根目录。把 dist 里面的放到服务器目录就行了。

malaimoo on 10 Aug 2017

图标路径不对，这么修改配置！

497955191 on 28 Nov 2017

厉害解决了

jiewangzi on 15 Dec 2017

版本信息：

{
    "webpack": "^2.3.3",
    "iview": "^2.0.0-rc.12"
}

在webpack2中可以配置publicPath来解决。如下：

/build/utils.js

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
    });
} else {
    return ['vue-style-loader'].concat(loaders);
}

jeneser on 23 Jan 2018

👍2

@jeneser @malaimoo @JuZiSang 图标问题仍旧存在，找不到原因，求帮助
vue-cli搭建的版本信息
default
已经按照上面描述修改webpack.prod。conf.js
default
这边配置的有多入口并且修改了打包路径
公共资源
default
静态页面
default
找不到解决的方法，求指教。