Блог

Я получаю это предупреждение:

[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: при использовании Vue, например <script src="https://unpkg.com/vue"></script> , через CDN, обычно выполняется полная сборка (если не указано иное).

Только для времени выполнения

Альтернативой шаблонным строкам является функция рендеринга. Если бы вы использовали только эти, вам не понадобился бы компилятор, и вы могли бы использовать сборку только для времени выполнения:

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

Связыватели (например, Vue CLI): когда вы используете связыватель, подобный Vue CLI, он предварительно встраивает ваши шаблоны в функции рендеринга для вас, так что компилятор не нужен в производстве. Это позволяет выполнять сборку только для времени выполнения.

Документы описывают среду выполнения следующим образом:

Среда выполнения: код, который отвечает за создание экземпляров Vue, рендеринг и исправление виртуального DOM и т. Д. В основном все минус компилятор.

Итак, разница между полной сборкой и сборкой только для времени выполнения заключается в включении или исключении этого компилятора шаблонов.

Документы объясняют это так:

Если вам нужно скомпилировать шаблоны на клиенте (например, передать строку в параметр шаблона или подключиться к элементу, используя его внутренний HTML в качестве шаблона), вам понадобится компилятор и, следовательно, полная сборка:

И есть это предостережение, о котором нужно знать:

Поскольку сборки только для времени выполнения примерно на 30% легче, чем их аналоги для полной сборки, вы должны использовать их при любой возможности

Также в документах приведены конфигурации для использования полной сборки с пакетами. Например, в Webpack это:

 module.exports = {
  // ...
  resolve: {
    alias: {
      'vue