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

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

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

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

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

( 1),

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

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

虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， 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代码，如图所示：

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

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

리소스 경로 참조 문제가 해결되었음에도 불구하고 리소스의 배경 이미지가 여전히 표시되지 않습니다. 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 코드를 수정해야 합니다. 폴더(그림에 표시된 대로): 🎜🎜🎜🎜publicPath: '. ./../'추가 이 코드 줄은 글꼴 또는 그림 참조 문제를 해결할 수 있습니다. 🎜🎜🎜관련 무료 학습 권장 사항: 🎜javascript🎜(동영상) 🎜🎜

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