한 개의 Vue 프로젝트 안에서 User 페이지, Admin 페이지를 같이 운영하려고 했다.
즉, 두 개의 페이지를 사용하려고 했다.
vue.config.js에서 이런식으로 분리를 해주고
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
admin: {
entry: 'src/admin/admin.js',
template: 'public/admin.html',
filename: 'admin.html',
}
}User 페이지에서는 tailwindcss를 사용하고
Admin 페이지 쪽에서는 vuetify를 사용하였다.
dev-server로 구동 중일 때는 잘 되었는데 build를 하니까 문제가 발생했다. 양쪽의 css가 다 틀어지는 것이었다.
원인 분석을 해본 결과 css가 제대로 분리가 되지 않고 서로 불러오는 모양이다.
User 페이지쪽은 css가 좀 틀어지는 거지만 Admin 페이지쪽은 아예 css가 적용도 안되는 지경이었다.
그래서 postcss.config.js를 수정한 결과 (몇 가지를 주석 처리)
module.exports = {
plugins: {
tailwindcss: {},
// 'vue-cli-plugin-tailwind/purgecss': {},
// autoprefixer: {}
},
}Admin 페이지 쪽은 정상으로 돌아왔다. 하지만 User 페이지 쪽은 아직 틀어져있는 상태였다.
몇 가지 변경하면서 실험해 본 결과 Admin 쪽에서 vuetify.css를 불러오면 틀어지고 안 불러오면 정상으로 되었다.
그래서 admin.js에서 import로 불러오던 것을 제거하고 admin.html에서 cdn방식으로 불러오게 수정하였더니 양쪽 다 정상 작동하였다.