vue-cli 3을 사용하여 두 개의 번들을 별도로 생성하려면 어떻게 해야 합니까?

vue-cli 3을 사용하여 두 개의 번들을 별도로 생성하려면 어떻게 해야 합니까?

익스프레스 애플리케이션의 두 가지 다른 경로('퍼블릭' vue 앱과 'admin' vue 앱)에서 제공되는 두 개의 개별 vue 앱을 구축하려고 합니다.이 두 앱은 자체 라우터와 저장소를 가지고 있지만 많은 사용자 지정 구성 요소를 공유합니다.기본 웹 팩 템플릿을 편집하여 두 개의 다른 진입점('public' 및 'admin')에 따라 두 개의 개별 번들을 출력하도록 하려면 어떻게 해야 합니까?최종적으로는 다음과 같은 셋업을 하는 것이 목표입니다.

my-app/
+- ...
+- dist/
|  +- admin/         Admin bundle and files
|  +- public/        Public bundle and files
+- src/
|  +- components/    Shared components
|  +- admin/         Entry point, router, store... for the admin app
|  +- public/        Entry point, router, store... for the public app
+- ...

사용 가능한 2개의 개발 서버 http://localhost:8080/admin 및 http://localhost:8080/public이 필요합니다.각 프로젝트는 dist의 자체 폴더 및 자체 퍼블릭에 있어야 합니다.

오늘의 내용: 루트 디렉토리에 vue.config.js 파일을 작성했습니다.다음은 예를 제시하겠습니다.

module.exports = {
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // If you wish to remove the standard entry point
    config.entryPoints.delete('app')

    // then add your own
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
    .entry('public')
      .add('./src/public/index.js')
      .end()
  }
}

완전히 다른 빌드가 필요하다고 가정하고 엔트리에 따라 안내되는 일부 공유 스크립트를 사용하여 별도의 빌드 명령을 추가할 수 있습니다.

당신의 소포 안에.json "disclosed" 섹션:

"scripts": {
    "build:admin": "vue-cli-service build --dest dist/admin src/admin/index.js,
    "build:public": "vue-cli-service build --dest dist/public src/public/index.js
}

관리 빌드의 경우 다음을 실행할 수 있습니다.

npm run build:admin

공공 건물의 경우:

npm run build:public

자세한 내용은 빌드 대상 문서를 참조하십시오.

저도 이 건에 매우 관심이 있습니다.

서브페이지로 이 문제를 해결할 수 있을 것 같습니다.

https://cli.vuejs.org/config/ #pages : "여러 페이지 모드로 앱을 빌드합니다.각 "페이지"에는 대응하는 JavaScript 엔트리 파일이 있어야 합니다.값은 오브젝트여야 합니다.여기서 키는 엔트리의 이름이고 값은 다음 중 하나입니다."

module.exports = {
  pages: {
    index: {
      // entry for the *public* page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html'
    },
    // an admin subpage 
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `admin.html`.
    admin: 'src/admin/main.js'
  }
}

다른 대답을 여기 위 건물, 나는 그것이 차라리는 명령 선에서 그것을 하는 것보다 vue.config.js에 빌드 출력 디렉터리를 지정할 수 걸 발견했죠.그럼의 사용과 조합입니다.VUE_CLI_SERVICE_CONFIG_PATH환경 변수 많은 것들-그것을 위해copy/delete config 파일에 볼 필요가 만들 때마다 더 간단하게 만든다.

그러나 Vue 구성 파일에 대한 전체 경로를 지정해야 합니다.이것은 Windows에서도 동작하지만 Linux 타입의 터미널에서만 동작합니다(예를 들어 Git for Windows에서 설치된 Git Bash에서 테스트했습니다만, 정상적인 Windows 명령 프롬프트에서는 동작하지 않습니다.NPM 스크립트에서 동작했을 때 환경변수를 설정하는 방법을 찾을 수 없었기 때문입니다.

https://gist.github.com/EdwardMillen/0c417747cd8ce64b8ba550bdfa582cf5

그것은 또한 여러가지 또한개를가질 수도 있습니다 여러가 가능하다vue.config.jsConfigs고설정 싱크 스위치오버를 실시합니다를 사용하여 전환.VUE_CLI_SERVICE_CONFIG_PATH환경 변수.환경 변수입니다.

예를 들어, 우리는디폴트값으로설정할 수 있습니다 들어 기본 예를을 가질 수 있다.vue.config.js및 추가적인 싱크 추가 정보vue.public.config.js그리고 이 같다:빌드를 실행하십시오.다음과같이 빌드를 실행합니다.

# Build using vue.config.public.js
# Note: using real path here, it didn't work with relative path
CONF=`realpath vue.config.public.js`
VUE_CLI_SERVICE_CONFIG_PATH=$CONF npm run build

# Build using default vue.config.js
npm run build

어디 어디에npm run build에 정의되어 있습니다에 정의되어 있다.package.json~하듯이로vue-cli-service build::

"scripts": {
    "build": "vue-cli-service build"
}

노트:나는 주의에 대한 언급:다음 이야기 항목에대한 언급은 없습니다를 찾지 않았다.VUE_CLI_SERVICE_CONFIG_PATH소스코드를 조사하던 중 발견했습니다.

언급URL : https://stackoverflow.com/questions/49454372/how-can-i-create-two-separate-bundles-with-vue-cli-3