這次帶給大家vue與node怎麼搭建webpack環境，vue與node搭建webpack環境的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、環境搭建
去官網安裝#node.js(http://www.runoob.com /nodejs/nodejs-install-setup.html )
# 注意node的版本，只有支援和諧模式的node才會支援es6,在基於webpack建置專案名稱時才不會報錯。推薦最新版本.
下載安裝包之後直接點選安裝即可。
利用npm安裝webpack命令列語句為npm install webpack -g。測試安裝成功的介面如下：
接下來就是全域安裝vue-cli。要注意的是使用npm安裝vue-cli的時候時間很久，可能會超過兩小時
安裝語句為：npminstall--globalvue-cli
建立一個基於webpack模板的新專案
命令列語句為vue init webpack my-project(其中my-project為檔案名稱,且檔案名稱只能是小寫字母)。在建立範本新專案的時候需要進入到指定的資料夾下面去。
在cmd裡輸入vue init webpack my-project (項目資料夾名稱)，回車後，等待一小會兒，依次出現'git'下的項，
在創建新項目時,如果報以下錯誤,則說明node版本過低，不支持和諧模式（大概就是說支持es6,f否則不支持，具體還需大神指教），應換成高版本的node。錯誤如下圖所示：
在cmd裡1).輸入：cd my-project（項目名），回車，進入到具體項目文件夾
輸入：cnpm install，回車，等待一小會兒
# 回到專案資料夾，會發現專案結構裡，多了一個node_modules資料夾（該檔案裡的內容就是先前安裝的依賴）
webstorm安裝，專案的引入
到官網下載webstrom安裝包進行安裝。
一直next,根據自己電腦系統，選擇安裝64位元的系統還是32位元的，選取js,css,html àjetbrainsà然後就是install安裝
在webstorm中file下選擇open （選擇你的專案資料夾）
# 看著很簡單，我怕過幾天我操作出錯。
測試環境是否建置成功
# 方法1：在cmd裡輸入：cnpm rundev
# （顯然每次修改程式碼，每次去cmd輸入指令是個很繁瑣的過程，所以在webstorm中調出npm選單。
在package.json檔案上點選右鍵—〉點選show npm scripts 即可調出選單，以後運行只需在npm選單裡雙擊dev.
注意在命令列運行項目和dev運行項目不可一起進行，進行一個時需將另一個關閉，否則會報到端口已被佔用的錯誤。
）
方法2：在瀏覽中輸入：localhost:8080(預設連接埠為8080)
如果輸入運行指令後，報錯。則有兩種情況，如下圖所示：
# 第一種情況：連接埠佔用問題
則解決方案為：
# 方案1：在進程中關閉該連接埠。
a.開啟cmd,輸入指令netstat –ano 會出現所有的連接埠號，
b.local address下面是連接埠號，PID是佔用連接埠號碼的某程式的進程號（記住進程號）
c.開啟工作管理員（ctrl alt delete） ,點擊進程, 然後點擊查看,選擇「選擇列」,點擊確定後就會找出佔用了連接埠進程
d.找出記住的進程號，關閉
# 方案2：在config/index.js檔案中，修改連接埠號碼。 Port：新連接埠號碼。
第二種：npm版本過低，需要升級：
解決方案：
a.輸入指令：npm install -g npm
b.複製C:Users{你的Windows使用者名稱}AppDataRoamingnpmnode_modulesnpm下的檔案到你的 NodeJS安裝目錄下的 node_modulesnpm 中，覆寫原有的全部檔案
（或用比較苯的方法，重新走一遍之前的步驟）
二、應個人需求會存在的改變
1、vue.js更改預設埠號8080為指定埠：
# 執行npm run dev實際上是在呼叫根目錄下的package.json
開啟package.json後可發現有這樣一段程式碼
"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"
}# 由此可知，我們應該查看build目錄下的dev-server.js檔案
在dev-server.js檔案中可找到
# varuri='http://localhost:' port
此處的port便是我們將要尋找的，在dev-server.js的開始部分我們可以發現
# varpath=require('path')
# 而path又是從哪裡來的呢？
根目錄下有config資料夾，看名字就知道與設定有關，開啟config目錄下的index.js
dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false
}這裡不僅可以改變端口，還可以根據需要改變其他配置資訊。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue與node怎麼搭建webpack環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！
