vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下怎么使用及建立

這篇文章主要介紹“vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下怎么使用及建立”，在日常操作中，相信很多人在vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下怎么使用及建立問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下怎么使用及建立”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

準(zhǔn)備

準(zhǔn)備兩臺(tái)電腦，一臺(tái)能上網(wǎng)，一臺(tái)開發(fā)機(jī)器（不能上網(wǎng)）。

兩臺(tái)電腦分別安裝最新版Nodejs的包管理器，以便使用npm命令。（備注：Nodejs自帶npm）

資源下載

在有網(wǎng)的電腦中啟動(dòng)cmd，輸入命令"npm config set registry=http://registry.npm.taobao.org "配置鏡像站，（也可以不用配置，根據(jù)自己網(wǎng)絡(luò)確定情況）。

在cmd中，輸入"npm install vue -g"，下載到全局路徑node_modules文件夾下。

在cmd中，輸入"npm install vue-router -g"，下載到全局路徑node_modules文件夾下。

在cmd中，輸入"npm install webpack -g"，下載到全局路徑node_modules文件夾下。

在cmd中，輸入"npm install vue-cli -g"，下載到全局路徑node_modules文件夾下。注意：vue-cli工具是內(nèi)置了模板包括 webpack 和 webpack-simple,前者是比較復(fù)雜專業(yè)的項(xiàng)目，他的配置并不全放在根目錄下的 webpack.config.js 中。

在cmd中，輸入"npm install webpack-dev-server -g"，下載到全局路徑node_modules文件夾下。注意：是為了規(guī)避錯(cuò)誤"執(zhí)行 node start env提示 'webpack-dev-server' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序"。

在cmd中，輸入"npm install -D webpack-cli -g"，下載到全局路徑node_modules文件夾下。注意：是為了規(guī)避錯(cuò)誤“Cannot find module 'webpack/bin/config-yargs'”。

在cmd中，輸入"npm install html-webpack-plugin -g"，下載到全局路徑node_modules文件夾下。注意：是為了規(guī)避錯(cuò)誤“Cannot find module 'html-webpack-plugin'”。

下載后的文件在"C:\Users\XXX賬戶文件夾\AppData\Roaming\npm\node_modules"。

資源遷移

拷貝有網(wǎng)電腦的"C:\Users\XXX賬戶文件夾\AppData\Roaming\"中的"npm"和"npm-cache"兩個(gè)文件夾到開發(fā)機(jī)的相同路徑。

拷貝有網(wǎng)電腦的"C:\Users\XXX賬戶文件夾\"中的".vue-templates"到相同路徑。(如果不存在，則執(zhí)行"vue init webpack XXX文件夾"，將會(huì)自動(dòng)生成)

方法一：項(xiàng)目離線創(chuàng)建

在開發(fā)機(jī)中啟動(dòng)cmd，cd到指定目錄。eg:輸入"d:"，到d盤；輸入"cd projectA"，到項(xiàng)目所在文件夾下。

輸入命令"vue init webpack XXX文件夾 --offline"，注意：XXX文件夾，指的是將要?jiǎng)?chuàng)建的存儲(chǔ)文件夾。

按照步驟完成操作：(Vue build 改為選擇runtime;最后一個(gè)選擇Yes,use npm) 

輸入命令"cd XXX文件夾"，運(yùn)行npm install安裝依賴。

輸入命令"npm run dev"，啟動(dòng)項(xiàng)目。

輸入命令"npm run build"，建立index.html啟動(dòng)項(xiàng)。

如果有錯(cuò)誤：全局安裝的 webpack運(yùn)行時(shí) 報(bào)錯(cuò) Error: Cannot find module 'webpack'。

解決方法：添加系統(tǒng)環(huán)境變量，變量名為：NODE_PATH；變量值為：你的npm下的node_modules文件夾絕對(duì)路徑。

方法二：項(xiàng)目遷移

在有網(wǎng)電腦按照方法一創(chuàng)建項(xiàng)目。

將項(xiàng)目文件夾拷貝到開發(fā)機(jī)上運(yùn)行即可。

到此，關(guān)于“vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下怎么使用及建立”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！