在使用vue-cli脚手架构建项目时会遇到一个选项Vue build(vue构建)有两个选项Runtime Compiler和Runtime-only,以下为有道翻译直译Runtime Compiler: recommended for most users运行时编译器:推荐给大多数用户–有道翻译Runtime-only: about 6KB lighter mingzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅限运行时:大约6KB的轻量级mingzip但是模板(或任何特定于vue的html)只允许在.vue文件中使用——其他地方需要呈现函数–有道翻译vue官方文档也有相关介绍如下对不同构建版本的解释运行时 编译器 vs只包含运行时如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)就将需要加上编译器即完整版// 需要编译器newVue({template:div{{ hi }}/div})// 不需要编译器newVue({render(h){returnh(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不同如下所示RuntimeCompiler版本// The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefromvueimportAppfrom./AppVue.config.productionTipfalse/* eslint-disable no-new */newVue({el:#app,components:{App},template:App/})Runtime-only版本importVuefromvueimportAppfrom./AppVue.config.productionTipfalse/* eslint-disable no-new */newVue({el:#app,render:hh(App)})简单理解我们在书写.vue代码时所有的HTML代码都是包含在template标签中的template中的代码是作为字符串存在的例如templatedivclassboxp{{message}}/p/div/templateRuntime-only版本字面意思是只包含运行时版本是在构建时通过webpack的vue-loader工具将模板预编译成JavaScript也就是进行了预编译在最终打好的包里实际上是已经编译好的在浏览器中可直接运行RuntimeCompiler字面意思为运行时编译器是不在打包时进行编译的是在客户端浏览器运行时进行编译的所以要使用带编译器的完整版本下图来自Vue官网是关于不同版本Vue文件的简介下图为两种模式下npm run dev后在谷歌控制台查看main.js引入的vue文件版本因为在Vue.js 2.0中最终渲染都是通过render 函数如果写template 属性则需要编译成 render 函数那么这个编译过程会发生在运行时所以需要带有编译器的版本。很显然这个编译过程对性能会有一定损耗所以通常我们更推荐使用Runtime-Only 的 Vue.js。参考文章1了解vue里的Runtime Only和RuntimeCompiler