Vue의 런타임 전용 빌드는 정확히 무엇이며 컴파일러 빌드와 어떻게 다른가?

Vue의 런타임 전용 빌드는 정확히 무엇이며 컴파일러 빌드와 어떻게 다른가?

이 경고가 들린다.

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

아래에 내 기본 보일러 번호와 함께.그게 내가 내 삶을 창조하는걸 막고 있다는걸 이해한다Foo구성 요소와 유사하지만 정확히 같은 의미인지, 그리고 Vue 인스턴스를 인스턴스화하는 다른 방식과 어떻게 다른지?

const Foo = {
  template: `<div>xxx</div>`
}
const routes = [
  { path: '/foo', component: Foo },
  { path: '/', component: App}
]
    
const router = new VueRouter({
  routes:routes
})
Vue.config.productionTip = false
    
new Vue({
  router
}).$mount('#app')

전체 빌드(예: "컴파일러 포함")

"전체" 빌드라고도 알려진 "컴파일러 포함"은 컴파일러와 런타임을 모두 포함한다.컴파일러를 사용하면template다음과 같은 문자열:

template: `<div>xxx</div>`

CDN: 예를 들어 CDN을 통해 Vue를 사용할 때<script src="https://unpkg.com/vue"></script>, 일반적으로 Full build입니다(다른 이름으로 지정하지 않는 경우).

런타임 전용

템플릿 문자열에 대한 대안은 렌더 함수다.다음 항목만 사용하는 경우 컴파일러가 필요하지 않고 런타임 전용 빌드를 사용할 수 있음:

render(h) {
  return h('div', 'xxx')
}

번들러(예: Vue CLI):Vue CLI와 같은 번들러를 사용하면, 컴파일러가 프로덕션에 필요하지 않도록 템플릿을 미리 렌더링 기능으로 빌드한다.이것은 런타임 전용 빌드를 허용한다.

문서에서는 런타임을 다음과 같이 설명한다.

런타임: Vue 인스턴스 생성, 가상 DOM 렌더링 및 패치 적용 등을 담당하는 코드.기본적으로 컴파일러를 제외한 모든 것.

---

따라서 전체 빌드와 런타임 전용 빌드의 차이는 이 템플릿 컴파일러를 포함하거나 제외하는 것이다.

문서에서는 다음과 같이 설명한다.

클라이언트에서 템플리트를 컴파일해야 하는 경우(예: 템플리트 옵션에 문자열을 전달하거나, 템플리트 내 DOM HTML을 사용하여 요소에 마운트) 컴파일러와 전체 빌드가 필요한 경우:

그리고 다음과 같은 주의사항이 있다.

런타임 전용 빌드는 풀 빌드보다 무게가 약 30% 가볍기 때문에 언제든지 사용하십시오.

또한 문서에는 번들러와 함께 전체 빌드를 사용하기 위한 구성이 있다.예를 들어 웹팩에서는 다음과 같은 기능을 제공한다.

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

참조URL: https://stackoverflow.com/questions/66393740/what-exactly-is-vues-runtime-only-build-and-how-does-it-differ-from-compiler-bu