본문 바로가기

vue.js

vue3에서 vite 빌드 설정

# 웹팩 번들링

vue2의 vue.config.js에서는 번들링 결과 파일이 생성될 경로를 아래와 같이 설정했다.

"outputDir": "../webapp/dist",

vue3 vite에서 vite.config.ts에 설정할 때는 아래와 같이 바뀌었다.

build: {

   outDir: '../webapp/dist',

   // 이미 폴더가 존재할 경우 빌드 에러 발생하는데 아래 설정 넣으면된다.

  emptyOutDir: true,

}

 

# vue-router path에 .(dot)이 포함되어 있을 경우 제대로 동작하지 않는 현상이 있다.

열심히 구글링 했지만 아직 해결안된듯하고 아래와 같이 설치하고 플러그인 추가해주면 해결된다.

 

import pluginRewriteAll from 'vite-plugin-rewrite-all';

export default defineConfig({
	plugins: [
    	pluginRewriteAll(),
    ]
});