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

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

vue-cli 웹 팩 템플릿을 기반으로 단일 페이지 애플리케이션을 개발하고 있습니다.정적 자산도 사용해야 하므로 스타일시트에서 참조해야 합니다.

공식 문서에서는 다음과 같은 절대 경로를 사용할 것을 권장합니다.

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

문제는 정적 자산이 vue-loader 및 웹 팩 자체에 의해 처리되지 않기 때문에 최종 출력 스타일시트에서 URL이 올바르게 설정되지 않는다는 것입니다.webpack url-loader에 의해 처리되는 모든 자산은 publicPath 설정에 따라 올바른 상대 URL을 가져옵니다.스태틱 에셋에서도 같은 효과가 요구됩니다.

정적 자산을 vue.js 기반 애플리케이션과 함께 사용하는 방법을 알고 계십니까?

갱신하다

많은 시행착오를 거쳐 최종 스타일시트와 스크립트 번들을 index.html 옆의 루트 폴더에 넣기로 결정했습니다.생성된 경로는 정상적으로 동작합니다.스크립트와 스타일시트에 대해서는 하위 폴더를 선호하기 때문에 최적의 솔루션은 아닙니다(단, 파일은 1개만 포함).그럼에도 불구하고 일관되고 유효한 아티팩트를 생성하는 빌드 프로세스가 있습니다.

"실제" 정적 자산의 경우 정적 디렉토리를 사용합니다.

이에 비해 static/에 있는 파일은 Webpack에 의해 전혀 처리되지 않습니다.파일명이 같은 최종 수신처에 그대로 복사됩니다.절대 경로를 사용하여 이러한 파일을 참조해야 합니다. 절대 경로는 config.js의 build.assetsPublicPath 및 build.assetsSubDirectory에 가입하여 결정됩니다.

config/index.js에서 이 기본 경로를 덮어쓸 수도 있습니다.

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

static/에 있는 파일은 절대 URL /static/[filename]을 사용하여 참조해야 합니다.assetSubDirectory를 assets/[filename]로 변경할 필요가 있습니다.

언급URL : https://stackoverflow.com/questions/47677256/path-to-static-assets-in-vue-js-application