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

这篇文章主要为大家展示了"用vue-cli初始化项目带编译器和不带编译器的区别有哪些"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"用vue-cli初始化项目带编译器和不带编译器的区别有哪些"这篇文章吧。

在用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初始化项目带编译器和不带编译器的区别有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！