정적파일 및 에셋

컴포넌트

컴포넌트에서 에셋을 포함하려면 속성 바인딩 기능을 포함하거나, 정적파일을 포함하듯 포함시키면 됩니다. 다만, 컴포넌트에서 정적파일 또는 에셋을 불러오는 경우 자바스크립트를 통한 포함이므로 스킨 내부에서 별도로 경로 변환을 하지 않습니다. 따라서 따로 PUBLIC PATH 설정을 해줄 필요가 있습니다.
*.vue

<template lang="pug">
  //- PUBLIC_PATH/favicon.png
  img(src="./images/favicon.png")
  //- PUBLIC_PATH/__WEBPACK_CHANGED__.png
  img(:src='require("~/assets/images/favicon.png")')
</template>

CSS 프레임워크

Semantic UI 같은 CSS 프레임워크webpack.entry.js 에 포함하여 사용하는 경우 해당 CSS 프레임워크가 사용하는 에셋(아이콘 같은) 또한 컴포넌트에서 에셋을 부르는 것과 같이 자바스크립트를 통한 포함 이기 때문에 마찬가지로 PUBLIC PATH 설정을 해야합니다.

PUBLIC PATH

webpack.base.conf.js 에서 publicPath 부분을 설정하는 것으로 컴포넌트에 포함된 에셋도 티스토리 스킨에서 불러올 수 있습니다. 해당 주소는 블로그 마다 다를 수 있으며, 개발자 도구 등을 통해 사용하고자 하는 블로그의 PUBLIC PATH 를 알아야 합니다. 사용자 배포용으로 개발하는 경우에는 곤란할 수도 있으므로 CDN(Content Delivery Network) 으로 에셋을 불러오시기 바랍니다.
webpack.base.conf.js
      
{
  test: /.(png|jpe?g|gif|svg)(?.*)?$/,
  loader: 'file-loader',
  options: {
    publicPath: 'https://tistory2.daumcdn.net/tistory/2710108/skin/images/'
  }
},
{
  test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
  loader: 'file-loader',
  options: {
    publicPath: 'https://tistory2.daumcdn.net/tistory/2710108/skin/images/'
  }
},
{
  test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
  loader: 'file-loader',
  options: {
    publicPath: 'https://tistory2.daumcdn.net/tistory/2710108/skin/images/'
  }
}