Skip to content

打包到生产环境时, woff 字体引用问题 #515

Closed
@malaimoo

Description

@malaimoo

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 导致加载错误。我现在都是手动改的,请问有没有方法解决一下这个问题?

Activity

icarusion

icarusion commented on Mar 28, 2017

@icarusion
Contributor

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

malaimoo

malaimoo commented on Mar 28, 2017

@malaimoo
Author

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

juzisang

juzisang commented on May 4, 2017

@juzisang

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

malaimoo

malaimoo commented on May 4, 2017

@malaimoo
Author

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

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

extract :true 改为 fasle

juzisang

juzisang commented on May 5, 2017

@juzisang

解决了,感谢

hegoku

hegoku commented on Jul 20, 2017

@hegoku
Tilang

Tilang commented on Aug 10, 2017

@Tilang

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

malaimoo

malaimoo commented on Aug 10, 2017

@malaimoo
Author

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

497955191

497955191 commented on Nov 28, 2017

@497955191

图标路径不对,这么修改配置!

jiewangzi

jiewangzi commented on Dec 15, 2017

@jiewangzi

厉害 解决了

jeneser

jeneser commented on Jan 23, 2018

@jeneser

版本信息:

{
    "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);
}
long369486562

long369486562 commented on Mar 30, 2018

@long369486562

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

long369486562

long369486562 commented on Mar 31, 2018

@long369486562

已经解决,不是IVIEW的问题 ,我更改了生产打包 公共资源路径 造成的 ,,更改公共资源路径必须使用绝对路径。。。

luo772435545

luo772435545 commented on May 12, 2018

@luo772435545

这个问题还是会存在的,比如在vue多页面,但是我页面处于不同文件夹,建议把字体路径根据js引入

erwer8363

erwer8363 commented on Sep 11, 2018

@erwer8363

已经解决,感谢

locked and limited conversation to collaborators on Sep 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @hegoku@erwer8363@icarusion@malaimoo@juzisang

        Issue actions

          打包到生产环境时, woff 字体引用问题 · Issue #515 · iview/iview