asp.net mvc 5에서 vue.js 설정 및 사용하기 2

전편에 이은 Hot Module Replacement 기능을 사용하기 위한 devServer 설정 방법입니다.

 

전편은 다음 링크를 참고하세요 

☞ https://logdirectory.tistory.com/12

asp.net mvc 5에서 vue.js 설정 및 사용하기

 

※ webpack devServer proxy의 상세 설정은 아래 링크를 통해 확인할 수 있다.
https://webpack.js.org/configuration/dev-server/#devserverprox

① vue.config.js에 아래와 같이 devServer의 프록시 설정을 한다.

 

② target 설정은 Visual Studio에서 프로젝트 URL과 동일하게 설정을 한다. 

    devServer: {     
        proxy: {
            '^/' : {
                target: 'http://localhost:50786',
                changeOrigin: true,
                ws: false,
                //예를 들어 /dist/home/helloworld으로의 요청은 /home/helloworld로 보낸다.
                pathRewrite: {'^/dist' : ''}
            }
        },
        publicPath: '/dist/'

솔루션 탐색기에서 프로젝트 파일 우클릭 후 속성 선택

 

③ 설정이 완료되면 Visual Studio에서 F5또는 Ctrl+F5를 사용하여 프로젝트를 시작하여 http://localhost:50786/ 에 접속이 되는지 확인한다.(포트 번호는 환경에 따라 바뀔 수 있음)

 

④ 터미널에서 npm run serve를 입력하여 devServer를 기동시킨다.

PS C:\workspace\vuejs\asp.net\AspNetMvc5-VueJs\AspNetMvc5-VueJs.Web> npm run serve
 
> new-app@0.1.0 serve C:\workspace\vuejs\asp.net\AspNetMvc5-VueJs\AspNetMvc5-VueJs.Web
> vue-cli-service serve
 
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    
 
 DONE  Compiled successfully in 4248ms                                                                                                                                                                                                                                           23:05:18
 
  App running at:
  - Local:   http://localhost:8080/dist/      
  - Network: http://192.168.128.121:8080/dist/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build. 

 

⑤ 브라우저에서 http://localhost:8080/dist/home/helloworld 또는 http://localhost:8080/home/helloworld에 접속하면 다음과 같은 화면을 확인할 수 있다.

⑥ Hot Module Replacement 기능이 정상 동작하는지 확인하기 위해 src/components/HelloWorld.vue를 수정하고 파일을 저장하면 자동으로 빌드가 되면서 실시간으로 아래와 같이 변경 사항이 적용되는 것을 확인할 수 있다. 

 

⑦ 개발 작업이 끝나면 서버에 배포를 하기 위한 배포용 파일을 만들기 위해 npm run build를 실행한다.

PS C:\workspace\vuejs\asp.net\AspNetMvc5-VueJs\AspNetMvc5-VueJs.Web> npm run build
 
> new-app@0.1.0 build C:\workspace\vuejs\asp.net\AspNetMvc5-VueJs\AspNetMvc5-VueJs.Web
> vue-cli-service build
 
 
|  Building for production...
 
 DONE  Compiled successfully in 4714ms                                                                                                                                                                                                                                           23:34:08
  File                                     Size             Gzipped
 
  dist\js\chunk-vendors.2ce01813.js        82.83 KiB        29.95 KiB
  dist\js\home_helloworld.6564a32f.js      4.67 KiB         1.68 KiB
  dist\css\home_helloworld.8d47dcca.css    0.33 KiB         0.23 KiB
 
  Images and other types of assets omitted.
 
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

⑧ 자동으로 생성된 파일은 프로젝트에 포함이 되어 있지 않기 때문에 프로젝트에 포함을 시켜주어야 한다. 아래와 같이 dist폴더에서 우클릭 후 프로젝트 포함을 선택하여 프로젝트에 포함시킨다.

 

 

⑨ 이제 asp.net mvc5 에서 Hot Module Replacement 기능을 사용하여 vue.js를 개발할 수 있게 되었습니다.