Skip to content

[vue] 怎么解决vue打包后静态资源图片失效的问题? #554

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 怎么解决vue打包后静态资源图片失效的问题?

Activity

zyronon

zyronon commented on Jul 2, 2019

@zyronon

没遇到这个问题 - -
好像相对路径要加require,用绝对路径不用加。

pygo1

pygo1 commented on Jul 3, 2019

@pygo1

设置assetsPublicPath将 assetsPublicPath: '/' 改为 assetsPublicPath: './'

yelingfeng

yelingfeng commented on Jul 10, 2019

@yelingfeng

background: url("@/assets/images/xxxxx")

Wu-wb

Wu-wb commented on Jul 12, 2019

@Wu-wb

加这个可以吗?publicPath: '../../'

HeMin0919

HeMin0919 commented on Jul 20, 2019

@HeMin0919

找到config/index.js 配置文件,找build打包对象里的assetsPublicPath属性

默认值为/,更改为./就好了

Damonlanyang

Damonlanyang commented on Sep 5, 2019

@Damonlanyang

找到config/index.js 配置文件,找build打包对象里的assetsPublicPath属性

默认值为/,更改为./就好了

最新的 用vue-cli构建的VUE项目,貌似没有那个config文件夹,更没有那个assetsPublicPath属性了,怎么办呢

upcurrent

upcurrent commented on Oct 21, 2019

@upcurrent

最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可

wush12

wush12 commented on Nov 5, 2019

@wush12

1.静态图片,webpack打包的时候复制到指定目录,设置assetsPublicPath
2.图片路径使用绝对路径

lostimever

lostimever commented on Feb 20, 2020

@lostimever

找到config/index.js 配置文件,找build打包对象里的assetsPublicPath属性
默认值为/,更改为./就好了

最新的 用vue-cli构建的VUE项目,貌似没有那个config文件夹,更没有那个assetsPublicPath属性了,怎么办呢

可以自己新建的config.js 在里面配置

mingyec

mingyec commented on Mar 28, 2020

@mingyec

assetsPublicPath想自己定义的可以在根目录下的vue.config.js里去配置,vue-cli文档有些

hc3001

hc3001 commented on Nov 25, 2020

@hc3001

上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况。
1、确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cli3 字段不一致(assetsPublicPath 和 publicPath ),如果项目是根路径上,用'/','./'都行,如果是在'/hc'这个路径上,用'./' 相对路径(需history模式),也可以用'/hc/'。 在'/hc'路径上,如果需要本地和线上保持一致,可以用环境做判断设置不同的publicPath值。
2、确定静态文件放置的位置。
①、如果放在public/static,不经过webpack打包, 放在public 又分使用绝对路径和相对路径。
②、如果放在assets, 经过webpack打包, 使用的是相对路径
3、路径是否是动态的,如果是动态,需要用require() 引入。

https://blog.csdn.net/qq_31126175/article/details/99550889

crush2020

crush2020 commented on Jan 25, 2021

@crush2020

最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可,至于怎么写,去看vue-cll官网的api即可找到详细信息。

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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yelingfeng@haizhilin2013@pygo1@mingyec@zyronon

        Issue actions

          [vue] 怎么解决vue打包后静态资源图片失效的问题? · Issue #554 · haizlin/fe-interview