用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初始化項目帶編譯器和不帶編譯器的區別有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！