用vue-cli初始化项目带编译器和不带编译器的区别

图中第一句用红框圈住的话：Runtime+ Compiler:....

第二句：Runtime-only：.......

从字面意思就可以看出初始化项目过程中，选第一行的话生成的vue项目就是带编译器的，选第二句的话就是不带编译器的，同时它们都是选择的运行时版本。

首先咱们测试一下，假如用vue-cli生成项目时，在遇到Vue Build选项时，选择的是第二行，那你的项目中引入的vue版本应该是Runtime-only不带编辑器的版本，回忆一下上一篇文章，支持运行时并且不带编译器的版本是哪个呢？

可以发现是vue.runtime.esm.js和vue.runtime.common.js这俩版本，这俩啥区别呢？

前者遵循commonjs模块化规范，后者支持es6模块化规范，最新版本的vue-cli构建vue项目用的是webpack2，而webpack2支持以上两种规范，如果你用vue-cli初始化项目的时候选择第二行，那项目中引入的版本为vue.runtime.esm.js或者是vue.runtime.common.js

验证一下，打开vue项目中的package.json查看main属性如下：

那如果初始化过程中选择的是第一行呢，运行时带编译器。结果生成的vue项目中使用的是哪一个版本的vue呢？

回忆一下上一篇文章，支持运行时并且带编译器的是8个文件中的哪一个呢？

可以发现vue.esm.js与vue.common.js这两个版本都带编译器并支持运行时的，那选哪一个呢，其实都可以。

那我们验证一下，选择第一行后生成的项目中vue的安装包的package.json中查看main属性：

发现结果不对，main属性还是vue.runtime.common.js,怎么会这样呢？原来vue-cli在初始化项目后，修改了一下vue项目导入得别名，当在项目中导入vue时，导入的是vue的别名指向的版本。

那别名在哪里修改的呢?在项目中build中的webpack.base.conf.js中修改的，如图：

那这句话啥意思呢?

可以查看webpack的文档http://www.css88.com/doc/webpack/configuration/resolve/大致意思就是，在项目中导入vue，导入的版本实际上是这里指向的版本，这里会覆盖package.json中的main属性，加上$是为了精确匹配。

到此用vue-cli初始化项目带编译器和不带编译器的区别就为大家介绍完了。

文章内容很短，但涉及的知识面比较多，首先你要明白javascript模块化常用的几种规范，如：AMD、CMD、Commonj、UMD，这个需要大家下功夫钻研，然后还需要了解vue的编译器是个干什么的，其实就是带编译器的版本在实例化组件时可以使用template选项，不带编译器，就不可以使用tempalte选项。

打网球的李娜有句名言送给大家共勉：使你痛苦的，必将让你强大。试着脱离舒适区看一些稍微看不懂或者使你头疼的文章，并试着弄懂她。后一句是我送给大家的。