vue.js 응용 프로그램의 정적 자산 경로

Question

vue-cli webpack 템플릿을 기반으로 단일 페이지 응용 프로그램을 개발 중입니다. 정적 애셋도 사용해야하므로 스타일 시트에서 참조해야합니다.

는

공식 문서는 다음과 같은 절대 경로를 사용하는 것이 좋습니다

background-image: url('/assets/images/lo/example2.svg'); 

문제는, 정적 자산은 VUE 로더에 의해 자체 웹팩 처리, 그래서 URL을 원되지 않습니다됩니다 최종 출력 스타일 시트에서 올바르게 설정되지 않았습니다. webpack url-loader가 처리 할 모든 자산은 publicPath 구성에 따라 올바른 상대 URL을 가져옵니다. 정적 애셋에도 동일한 효과가 필요합니다.

정적 애셋을 vue.js 기반 응용 프로그램과 함께 사용하는 방법을 알고 있습니까?

업데이트

연구와 시행 착오를 많이 후, 나는 마지막 스타일 시트 옆에 index.html을에 루트 폴더 안에있는 스크립트 번들을 배치하기로 결정했습니다. 생성 된 경로가 제대로 작동합니다. 스크립트와 스타일 시트에 하위 폴더를 선호하기 때문에 최적의 솔루션이 아닙니다 (하나의 파일 만 포함하고 있음에도 불구하고). 그러나 그럼에도 불구하고 일관되고 유효한 아티팩트를 생성하는 빌드 프로세스가 있습니다.

Answer 1

"실제"정적 자산의 경우 정적 디렉토리를 사용하십시오.

비교해 보면 정적/파일은 Webpack에서 전혀 처리되지 않습니다. 동일한 파일 이름으로 최종 대상에 그대로 직접 복사됩니다. config.js의 build.assetsPublicPath 및 build.assetsSubDirectory를 결합하여 결정되는 절대 경로를 사용하여 이러한 파일을 참조해야합니다.

또한 설정이 기본 경로를 덮어 쓸 수 /하는 index.js

module.exports = { 
    // ... 
    build: { 
    assetsPublicPath: '/', 
    assetsSubDirectory: 'static' 
    } 
} 

정적에 배치 모든 파일/절대 URL/정적/[파일 이름]을 사용하여 참조해야합니다. assetSubDirectory를 assets로 변경하면이 URL을/assets/[filename]으로 변경해야합니다.