背景
換電腦褐啡，或系統(tǒng)就需要重新搭建一次開發(fā)環(huán)境罩锐，費(fèi)時(shí)費(fèi)力（本人總是不折騰不舒服斯基）奉狈。而且，linux發(fā)行版缺少常用軟件（例如涩惑，QQ,微信仁期，迅雷等等），mac太貴（都是窮惹的），hackintosh驅(qū)動折騰到天荒地老跛蛋，win系統(tǒng)……win系統(tǒng)能擼代碼熬的？！但是本屌絲赊级，還是停留win上押框，畢竟游戲不能放棄。但是工作還是要做理逊。順理成章的就只能依靠虛擬環(huán)境了橡伞。
嘗試過vmare，virtualBox晋被，但都坑在一個(gè)點(diǎn)上：虛擬機(jī)和宿主機(jī)的共享文件夾無法創(chuàng)建符號鏈接（symlink）兑徘。雖然可以依靠samba等軟件一定程度上解決。但是真心不好用……
在這個(gè)問題上折騰良久羡洛，終于找到了Vagrant挂脑。
至于如何安裝搭建Vagrant，百度上一搜一大把翘县，我就不多說了最域。
主題
最近在嘗試Vagrant上搭建web前段開發(fā)環(huán)境。
虛擬機(jī)：centOS 7 x64锈麸，yum源：阿里镀脂，epel，webtatic忘伞。
宿主機(jī)：win10
vagrant網(wǎng)卡配置：網(wǎng)卡一：nat默認(rèn)模式薄翅，網(wǎng)卡二：bridge橋接模式
（我相當(dāng)不喜歡nat，但是vagrant模式無法單網(wǎng)卡使用bridge）
IDE：phpstorm氓奈，（webstorm也一毛一樣）
此次以初始化一個(gè)vue單頁應(yīng)用為例翘魄，介紹如何搭建一個(gè)前端開發(fā)環(huán)境
一、安裝node和npm
yum install npm nodejs
yum源上的版本可能不是最新的舀奶，可以自己用npm命令更新暑竟。
二、全局安裝webpack育勺，vue-cli
具體操作詳見vue官方教程但荤，這里只介紹我遇到的問題，及解決方法
問題1：可能會出現(xiàn)error -21涧至，無法創(chuàng)建符號鏈接的問題腹躁。
解決：在win系統(tǒng)下，以管理員身份運(yùn)行cmd南蓬，啟動vagrant虛擬機(jī)就ok了
問題2：全局安裝vue-cli后纺非，vue命令報(bào)錯哑了，找不到該命令
原因：npm的lib存放目錄導(dǎo)致，vue-cli的命令工具所在目錄未被加入環(huán)境變量
解決：
1.執(zhí)行：npm root -g 查看npm的所有包所在路徑烧颖，以我自己的路徑為例：/node_modules/lib/node_modules（并不是默認(rèn)值弱左，我自己修改過）
2.而安裝vue-cli后，vue命令工具的被存在/node_modules/bin中了炕淮，然后就很簡單了科贬，將這個(gè)路徑加入環(huán)境變量就可以直接使用命令：vue init webpack my-project。（至于linux下將路徑加入環(huán)境變量鳖悠，都用vagrant+linux組合了，相信肯定會了）
注：項(xiàng)目要被初始化在虛擬機(jī)與宿主機(jī)共享文件夾下优妙，不然你就只能用vim寫js了（虛擬機(jī)的linux一般不安裝圖形界面）
問題3：npm run dev成功后乘综，局域網(wǎng)內(nèi)無法訪問項(xiàng)目地址
解決：修改 vue項(xiàng)目目錄下->config->index.js，host:'localhost'為host:'0.0.0.0'
問題四：在win系統(tǒng)下套硼，編輯共享文件夾中的vue項(xiàng)目卡辰，無法熱更新，無法刷新邪意，只能重新運(yùn)行：npm run dev
解決：項(xiàng)目跟目錄->config->index.js九妈，dev配置數(shù)據(jù)，poll: false修改為：poll: true
win下phpstorm(webstorm)配置
1.在win下安裝node雾鬼，編輯器需要使用node萌朱，至于不安裝的具體問題，我忘了……嘿嘿
2.重新配置webpack的config策菜，解決：import aaa from '@xxxx'晶疼，無法索引文件，export default xxx 提示unused之類之類的小麻煩又憨，默認(rèn)是沒有正確索引到webpack.config.js的翠霍，如果已經(jīng)索引到了，忽略此操作
phpstorm：File | Settings | Languages & Frameworks | JavaScript | Webpack蠢莺，修改文件路徑：項(xiàng)目根目錄/build/webpack.dev.conf.js
至此寒匙，我遇到的小問題就暫時(shí)解決完了。如果還有躏将，以后再更新锄弱。
結(jié)語：vagrant的好處
當(dāng)在vagrant搭建好開發(fā)環(huán)境后，可以制作box鏡像耸携。然后棵癣，在其他電腦中可以直接使用此鏡像，得到一毛一樣的環(huán)境夺衍。那么狈谊，更換系統(tǒng)后快速搭建環(huán)境（恢復(fù)一個(gè)vagrant鏡像只需要兩分鐘不到），統(tǒng)一多臺電腦的開發(fā)環(huán)境，有助于團(tuán)隊(duì)協(xié)作河劝。對于我來說壁榕，就是可以停留在win上繼續(xù)使用各種免費(fèi)的常用軟件，以及打游戲的同時(shí)赎瞎，使用linux做開發(fā)牌里，嘿嘿。（macOS的常用軟件數(shù)量還是不如win务甥，尤其是免費(fèi)的牡辽。至少我的使用過程中是這樣感受到的）。對于生產(chǎn)環(huán)境敞临，我也不知道……畢竟不是運(yùn)維态辛，公司的生產(chǎn)環(huán)境不會讓我去折騰得。
至于為啥不是docker挺尿，當(dāng)初我在選擇軟件時(shí)奏黑，搜到docker的隔離級時(shí)：服務(wù)級隔離。我還是想要一個(gè)虛擬機(jī)這種完整隔離的系統(tǒng)编矾。就一直沒有嘗試docker了熟史，以后沒事干了再去，畢竟不折騰不舒服斯基窄俏，嘿嘿~
最后的最后打一局廣告：php是最好的語言蹂匹，phper是萬能的~
