vue2 + vite + vuetify2 노트
vite의 빌드속도가 esbuild에 비해 10-100배의 속도
이번에 vite를 적용 테스트를 진행하게 되었다
사용하는 vue의 버젼은 2.6.14버젼이였고
vite-plugin-vue2는 2.6버젼 이하를 지원하는 vite였다.
2.7로 마이그레이션을 진행 하기에 사용하는 방식은 vue-property-decorator 였으며 vue-class-components 7.x 버젼을 사용하였다.
기존 cli에서 vite를 적용하기까지 정말 많은 페이지를 수정하였다.
alias는 vue 파일내에서 이상은 없었고
scss에서 @include를 하는 파일들은 상대경로였으며
background-image는 절대경로를 이용하였는데
include를 할때 상대경로에서 이슈가 발생하였다.
진행하던 프로젝트에서는 scss에서는 ~@, vue 컴포넌트 및 ts파일은 @ 규칙을 고수하였는데
import path from 'path'
...
alias: {
"~@": path.resolve(__dirname, './src')
"@": path.resolve(__dirname, './src')
},두 규칙 모두 src를 바라보도록 수정하였고
vite는 require를 지원하지 않기에 모든 이미지 경로를 제거하는 작업을 진행하였다
require\((['"`][^'"`]+\.(?:png|jpe?g|gif|svg)['"`])\)
require를 포함하며 ',",`으로 감싸져 있고 파일이 png.jpg.gif,svg로 끝나는 것들
$1으로 require 함수 제거
하지만 금세 후회하게 되었다.. 이미지들을 동적으로 불러오기 위해서는 vite의 import.meta.url을 이용해야했는데 이부분은 추후에 정규식으로 일괄 적용할 예정이다.
require 이슈를 해결하고 나니 파일의 빌드는 성공적으로 진행은 되었고
컴포넌트 및 vuetify를 인식하지 못하는 버그를 맞닥뜨리고 말았다.
vue-class-components에서는 @Components를 사용하면 안된다고 하는데
콘솔 에러가 상이했다.
어떤 컴포넌트는 불러오는데 어떤 컴포넌트는 불러오질 못하였고 두 파일의 차이점을 찾으려고 노력하였다.
내가 확인 했던 에러는 uncaught syntaxerror duplicate export of default 였고 export가 여러번 진행되었기에 불러오질 못하는 증상이였다
실제로 파일이 빌드가 되었을때 파일소스를 확인을 하니 export default는 하나였는데 말이다...
@Conponents() {
name : "ComponentsName"
conponents : {
}
}
//export default ComponentsName2 extend Mixin() {
export default ComponentsName extend Vue {
}파일 빌드가 진행되며 무언가 파일이 꼬였다고 생각을 하게되었는데 어떤 빌드 환경을 변경을 해보아도 해결될 기미가 보이지 않았다.
혹시 주석이 되어있는 export default 문제일까 라는 잠시 미쳤던 상상을하며
어차피 주석이니 지우고 다시 진행 해보자라는 판단이 끝날무렵 하루내내 괴롭혔던 syntaxerror가 해결되었다.
남은 이슈는 스타일 및 vuetify2를 적용하면 되었는데
cli로 편하게 적용했던 vuetify2를 다시 확인하려하니 생각보다 힘들었다.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
=========================================================
// src/main.js
import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export
new Vue({
vuetify,
}).$mount('#app')공식 문서, 다른사람들의 작업을 확인을 하더라도
unplugin-vue-components 혹은 import Vuetify from 'vuetify/lib' 을 적용하면 될거라고 하였는데
vite에서는 조금 달랐다.
lib가 아닌 vuetify를 import를 적용 하고 vuetify2까지 적용을 끝마치게 되었다.
========================================================
기존 vite를 이용하여 생성한 파일이 아닌 vue-cli에서 마이그레이션을 진행하는 작업이므로 아직 끝이 나진 않았지만 적용하는 그날을 위해 테스트는 꼼꼼히
