vue與node怎麼搭建webpack環境

這次帶給大家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中文網其它相關文章！

推薦閱讀：

js如何使用定時器實現倒數計時功能

標籤selected="selected"屬性失效如何處理

以上是vue與node怎麼搭建webpack環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！