[컴] vuejs 에서 여러 entry point 를 만들기

 여러 page 에서 vue 를 호출 / 각 페이지 마다 vue 호출

vuejs 에서 여러 entry point 를 만들기

대체로 우리가 SPA 를 만들면 entry point 가 하나이다. 그래서 그곳에서 new Vue 를 호출해서 사용한다. 그런데 entry point 를 여러개 만들면, 그 entry point 한 곳마다 new Vue 를 하는 것이라 보면 된다.

vue-cli 설치

entry point 를 여러곳으로 가져갈 수 있다. 이것은 ref. 1 을 보면, vue-cli 의 버전이 3.x 이상이 돼야 할 것 같다.

npm i @vue/cli
./node_modules/.bin/vue create mynewproj

vue.config.js 설정

아래처럼 각 entry point 를 설정하면 된다. 아래는 manage 라는 entry point 를 설정한 것이다. publicPath option 에 대해서는 ref. 2 를 참고하자.

module.exports = {
  pages: {
    // manage
    manage: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'manage/index.html', // manage
      title: 'Manage Page',
      chunks: ['chunk-vendors', 'chunk-common', 'manage']  // manage
    }
  },
  publicPath: ''
}
npm run build

vue.config.js tips

다음처럼 template 의 경로를 하나로 모으는 것이 낫다. 그래야 /dist 에서도 dist/template/... 처럼 한 곳으로 .html 을 모을 수 있다.

module.exports = {
  pages: {
    // set entry-point for each page
    applist: {
      entry: 'src/admin/applist/main.js',
      template: 'public/template/admin/base/admin-base.html',
      filename: 'template/admin/applist/index.html',
      title: 'App List',
      chunks: ['chunk-vendors', 'chunk-common', 'adm-applist']
    }
  },
  publicPath: '/static/vue/'
}

Reference

댓글 없음:

댓글 쓰기