在使用vue-cli
脚手架构建项目时,会遇到一个选项Vue build
(vue构建),有两个选项,Runtime + Compiler
和Runtime-only
,以下为有道翻译直译
-
Runtime + Compiler: recommended for most users
运行时+编译器:推荐给大多数用户--有道翻译
-
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅限运行时:大约6KB的轻量级min+gzip,但是模板(或任何特定于vue的html)只允许在.vue文件中使用——其他地方需要呈现函数--有道翻译
vue官方文档也有相关介绍如下(对不同构建版本的解释)运行时 + 编译器 vs只包含运行时
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
废话不多说,我直接分别使用两种方法构建一个项目看看区别,构建完成后,对比发现只有amin.js
不同,如下所示
-
Runtime+Compiler
版本
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
-
Runtime-only
版本
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
简单理解,我们在书写.vue
代码时,所有的HTML
代码都是包含在<template>
标签中的,<template>
中的代码是作为字符串存在的,例如
<template>
<div class='box'>
<p>{{message}}</p>
</div>
</template>
-
Runtime-only
版本字面意思是只包含运行时版本
,是在构建时通过webpack
的vue-loader
工具将模板预编译成JavaScript
,也就是进行了预编译
,在最终打好的包里实际上是已经编译好的,在浏览器中可直接运行 -
Runtime+Compiler
字面意思为运行时+编译器
,是不在打包时进行编译的,是在客户端(浏览器)运行时进行编译的,所以要使用带编译器的完整版本
下图来自Vue
官网,是关于不同版本Vue
文件的简介
下图为两种模式下,npm run dev
后,在谷歌控制台查看main.js
引入的vue
文件版本
因为在Vue.js 2.0
中,最终渲染都是通过render 函数
,如果写template 属性
,则需要编译成 render 函数,那么这个编译过程会发生在运行时,所以需要带有编译器的版本。很显然,这个编译过程对性能会有一定损耗,所以通常我们更推荐使用Runtime-Only 的 Vue.js
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。