Develop Note by J.S.

배포 시 남아있는 Cache로 인해 각 chunk 파일들이 cache된 파일을 다운받아 즉각적으로 수정내용이 반영되지 않아 보이는 경우에는 Output 파일에 hash값을 추가하면 해결 할 수 있습니다. module.exports = { configureWebpack: (config) => { config.output.filename = 'js/[name].[chunkhash].js'; config.output.chunkFilename = 'js/[name].[chunkhash].js'; }, }

다중 Vue Instance로 여러 페이지 생성 시에는 vue.config.js에서 각 Path별 entry 경로를 설정하여 사용합니다. module.exports = { pages: { index: { entry: 'src/main.ts', template: 'public/index.html', filename: 'index.html', }, separate: { entry: 'src/pages/separate-page/main-separate-page.ts', template: 'public/separate/index.html', filename: 'separate/index.html', }, }, } 여기서 Production 빌드로 배포 시에 각 인스턴스에 쓰인 css파일이 하나의 chunk파일에..

브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다. 해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. // vite.config.ts export default define..