vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式
準(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)行即可。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03![關(guān)于console.log打印結(jié)果是?[object?Object]的解決](http://img.jbzj.com/images/xgimg/bcimg1.png)
關(guān)于console.log打印結(jié)果是?[object?Object]的解決
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue實(shí)現(xiàn)直播功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能,開始時(shí)間、結(jié)束時(shí)間可配置，根據(jù)當(dāng)前時(shí)間初始化位置，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了深入剖析vite到底是快還是慢原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vue中的局部組件，文章圍繞Vue局部組件得相關(guān)資料展開內(nèi)容，需要的的小孩伙伴請(qǐng)參考下面文章的具體介紹，希望對(duì)你有所幫助2021-12-12
Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼
登錄注冊(cè)是最常用的網(wǎng)站功能,本文主要介紹了Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue中img或元素背景圖片無法顯示或路徑錯(cuò)誤的解決
這篇文章主要介紹了vue中img或元素背景圖片無法顯示或路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼
下面小編就為大家分享一篇vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03