vue webpack build 자원 상대 경로 의 문제 및 해결 방법

2028 단어 vuewebpackbuild경로
기본 적 인 상황 에서 웹 팩+vue-cli 가 포장 한 css,js 등 정적 자원 경 로 는 모두 절대적 인 것 입 니 다.즉,static 은 루트 디 렉 터 리 에서 폴 더 디 렉 터 리 가 있 는 항목 에 배치 하면 자원 경로 가 잘못 될 수 있 습 니 다.
그림:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
해결 방법:
웹 pack.prod.conf.js 에 output 에 publicPath:'./'를 추가 하거나 수정 합 니 다.

output: {
 publicPath: './',
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
이것 은 js,css 참조 주 소 를 수정 한 것 입 니 다.그러면 image 참조 주 소 는 요?
在这里插入图片描述

config      index
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../monitor01/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../monitor01'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 ...
 }
在这里插入图片描述
그림 주 소 를 상대 경로 로 변경 하고 build 에서 utils.js 파일 을 수정 합 니 다.

 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath: '../../'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }
在这里插入图片描述
총결산
vue webpack build 자원 의 상대 적 인 경로 에 관 한 문제 와 해결 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue webpack build 자원 의 상대 적 인 경로 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 을 바 랍 니 다!

좋은 웹페이지 즐겨찾기