這篇文章主要介紹如何搭建vue+node+webpack環(huán)境，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)寬城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、環(huán)境搭建

1.1、去官網(wǎng)安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html )

注意node的版本，只有支持和諧模式的node才會(huì)支持es6,在基于webpack構(gòu)建項(xiàng)目名稱(chēng)時(shí)才不會(huì)報(bào)錯(cuò)。推薦最新版本.

下載安裝包之后直接點(diǎn)擊安裝即可。測(cè)試安裝成功的界面如下：

1.2、利用npm安裝webpack命令行語(yǔ)句為npm install webpack -g。測(cè)試安裝成功的界面如下：

1.3、下面就是安裝淘寶鏡像，如下圖：

1.4、接下來(lái)就是全局安裝vue-cli。需要注意的是使用npm安裝vue-cli的時(shí)候時(shí)間很久，可能會(huì)超過(guò)兩個(gè)小時(shí)

安裝語(yǔ)句為：npminstall--globalvue-cli

1.5、創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

命令行語(yǔ)句為vue init webpack my-project(其中my-project為文件名稱(chēng),并且文件名只能是小寫(xiě)字母)。在創(chuàng)建模板新項(xiàng)目的時(shí)候需要進(jìn)入到指定的文件夾下面去。

在cmd里輸入vue init webpack my-project (項(xiàng)目文件夾名)，回車(chē)后，等待一小會(huì)兒，依次出現(xiàn)‘git'下的項(xiàng)，可按下圖操作

命令執(zhí)行完成后可以看到在my-project的文件夾下面多了如下的內(nèi)容：

在創(chuàng)建新項(xiàng)目時(shí),如果報(bào)以下錯(cuò)誤,則說(shuō)明node版本過(guò)低，不支持和諧模式（大概就是說(shuō)支持es6,f否則不支持，具體還需大神指教），應(yīng)換成高版本的node。錯(cuò)誤如下圖所示：

5.安裝依賴

在cmd里 1).輸入：cd my-project（項(xiàng)目名），回車(chē)，進(jìn)入到具體項(xiàng)目文件夾

2).輸入：cnpm install，回車(chē)，等待一小會(huì)兒

該命令執(zhí)行后可能會(huì)出現(xiàn)以下錯(cuò)誤,解決方案如下圖:

回到項(xiàng)目文件夾，會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)里，多了一個(gè)node_modules文件夾（該文件里的內(nèi)容就是之前安裝的依賴）

基于腳手架創(chuàng)建的默認(rèn)項(xiàng)目結(jié)構(gòu)如下圖所示：

6.webstorm安裝，項(xiàng)目的引入

去官網(wǎng)下載webstrom安裝包進(jìn)行安裝。

一直next,根據(jù)自己電腦系統(tǒng)，選擇安裝64位的系統(tǒng)還是32位的，選中js,css,html àjetbrainsà然后就是install安裝

在webstorm中file下選擇open （選擇你的項(xiàng)目文件夾）

看著很簡(jiǎn)單，我怕過(guò)幾天我操作出錯(cuò)。

7.測(cè)試環(huán)境是否搭建成功

方法1：在cmd里輸入：cnpm rundev

（顯然每次修改代碼，每次去cmd輸入命令是個(gè)很繁瑣的過(guò)程，所以在webstorm中調(diào)出npm菜單。

在package.json文件上點(diǎn)擊右鍵—〉點(diǎn)擊show npm scripts 即可調(diào)出菜單，以后運(yùn)行只需在npm菜單里雙擊dev.

注意在命令行運(yùn)行項(xiàng)目和dev運(yùn)行項(xiàng)目不可一起進(jìn)行，進(jìn)行一個(gè)時(shí)需將另一個(gè)關(guān)閉，否則會(huì)報(bào)端口已被占用的錯(cuò)誤。

）

方法2：在瀏覽里輸入：localhost:8080(默認(rèn)端口為8080)

如果輸入運(yùn)行命令后，報(bào)錯(cuò)。則有兩種情況，如下圖所示：

第一種情況：端口占用問(wèn)題

則解決方案為：

方案1：在進(jìn)程中關(guān)閉該端口。

a.打開(kāi)cmd,輸入命令netstat –ano 會(huì)出現(xiàn)所有的端口號(hào)，

b.local address下面是端口號(hào)，PID是占用端口號(hào)的某程序的進(jìn)程號(hào)（記住進(jìn)程號(hào)）

c.打開(kāi)任務(wù)管理器（ctrl + alt +delete） ,點(diǎn)擊進(jìn)程, 然后點(diǎn)擊查看,選擇“選擇列”,點(diǎn)擊確定后就會(huì)找出占用了端口進(jìn)程程序

d.找出記住的進(jìn)程號(hào)，關(guān)閉

方案2：在config/index.js文件中，修改端口號(hào)。Port：新端口號(hào)。

第二種：npm版本過(guò)低，需要升級(jí)：

解決方案：

a.輸入命令：npm install -g npm

b.復(fù)制C:\Users\{你的Windows用戶名}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安裝目錄下的 \node_modules\npm 中，覆蓋掉原有的全部文件

（或者用比較苯的方法，重新走一遍之前的步驟）

運(yùn)行起來(lái)后的效果如下圖所示：

二、應(yīng)個(gè)人需求會(huì)存在的改變

1、vue.js更改默認(rèn)端口號(hào)8080為指定端口：

執(zhí)行npm run dev實(shí)際是在調(diào)用根目錄下的package.json

打開(kāi)package.json后可發(fā)現(xiàn)有這樣一段代碼

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"

}

由此可知，我們應(yīng)該查看build目錄下的dev-server.js文件

在dev-server.js文件中可找到

varuri='http://localhost:'+port

此處的port便是我們將要尋找的，在dev-server.js的開(kāi)始部分我們可以發(fā)現(xiàn)

varpath=require('path')

而path又是從哪里來(lái)的呢？

根目錄下有一個(gè)config文件夾，看名字就知道與配置有關(guān)，打開(kāi)config目錄下的index.js

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false

}

這里不僅可以改變端口，還可以根據(jù)需要改變其他配置信息。

以上是“如何搭建vue+node+webpack環(huán)境”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：如何搭建vue+node+webpack環(huán)境-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article40/eooho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、標(biāo)簽優(yōu)化、企業(yè)建站、網(wǎng)站設(shè)計(jì)公司、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)