>  기사  >  웹 프론트엔드  >  vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

coldplay.xixi
coldplay.xixi원래의
2020-11-09 10:08:441763검색

vue.js가 패키징된 후 잘못된 이미지 경로에 대한 해결 방법: 1. [assetsPublicPath: './']를 수정합니다. 2. [webpack.prod.conf.js]를 열고 [publicPath: './']를 추가합니다. 출력.

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

vue.js가 패키징된 후 잘못된 이미지 경로에 대한 해결 방법:

[관련 기사 권장 사항: vue.js]

해결 방법은 다음과 같습니다. 그림:

( 1),

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

assetsPublicPath: './'assetsPublicPath: './'

(2)、打开webpack.prod.conf.js,在output:增加publicPath: './'

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码,如图所示:

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?

添加publicPath:'../../'

(2)을 수정하고 webpack.prod.conf.js를 열고 publicPath를 추가합니다. './' 출력:

vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?리소스 경로 참조 문제가 해결되었음에도 불구하고 리소스의 배경 이미지가 여전히 표시되지 않습니다. background: url("../../assets/images/logo-index.png ") no-repeat; isrelative 패키징 후에는 url(static/img/logo-index.2fbf2.png) no-repeat가 되므로 CSS 참조의 일반 경로를 유지해야 합니다. 이미지, 즉: url(../ ../static/img/logo-index.2fbf2.png) no-repeat

그런 다음 빌드에서 utils.js 코드를 수정해야 합니다. 폴더(그림에 표시된 대로): 🎜🎜6f3b90ca5ee364f5446549b126399 9f .png🎜🎜publicPath: '. ./../'추가 이 코드 줄은 글꼴 또는 그림 참조 문제를 해결할 수 있습니다. 🎜🎜🎜관련 무료 학습 권장 사항: 🎜javascript🎜(동영상) 🎜🎜

위 내용은 vue.js를 패키징한 후 이미지 경로가 잘못된 경우 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.