VUE style 背景图路径 build 问题

在vue dev是,写style(less)background-imgae:url 路径 指向 src/assets/imgage/ 下的图片,能正常显示,
但是在build后,不能显示,路径正常,路径下有对应图片。

clipboard.png
build后

clipboard.png

dev环境 能正常显示

clipboard.png

loader配置

clipboard.png

求解?

回答:

如果你是直接打开dist/index.html,需要将config/index.js改为下面

build: {
    assetsPublicPath: './'
}

同时,将build/utils.js增加

function generateLoaders (options) {
    ...
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        // 写改css中的路径
        publicPath: '../../'
      })
    }
    ...
}

回答:

你的路径并不正确,build之后是相对路径,并不能正确引用到。
不过不太清楚你的整体架构,也没有办法给出一个解决方案。

回答:

这里build后需要在你的路径上添加你的访问地址的路径,比如:后台的地址是:10.0.12.122/Me/…,
你的图片路径那里就是background-image:url(Me/static/…)

回答:

把static去掉直接访问./img就可以了

回答:

打开config里面的index.js,修改下build属性:

assetsPublicPath:'./'

设置成相对路径试下

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注