離線電腦搭建開發環境

準備兩臺電腦,一臺能上網,一臺開發機器(不能上網)。
兩臺電腦分別安裝最新版Nodejs的包管理器,以便使用npm命令。(備註:Nodejs自帶npm)
資源下載
在有網的電腦中啓動cmd,輸入命令"npm config set registry=http://registry.npm.taobao.org "配置鏡像站,(也能夠不用配置,根據本身網絡肯定狀況)。
在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工具是內置了模板包括 webpack 和 webpack-simple,前者是比較複雜專業的項目,他的配置並不全放在根目錄下的 webpack.config.js 中。
在cmd中,輸入"npm install webpack-dev-server -g",下載到全局路徑node_modules文件夾下。注意:是爲了規避錯誤"執行 node start env提示 'webpack-dev-server' 不是內部或外部命令,也不是可運行的程序"。
在cmd中,輸入"npm install -D webpack-cli -g",下載到全局路徑node_modules文件夾下。注意:是爲了規避錯誤「Cannot find module 'webpack/bin/config-yargs'」。
在cmd中,輸入"npm install html-webpack-plugin -g",下載到全局路徑node_modules文件夾下。注意:是爲了規避錯誤「Cannot find module 'html-webpack-plugin'」。
下載後的文件在"C:\Users\XXX帳戶文件夾\AppData\Roaming\npm\node_modules"。
資源遷移
拷貝有網電腦的"C:\Users\XXX帳戶文件夾\AppData\Roaming\"中的"npm"和"npm-cache"兩個文件夾到開發機的相同路徑。
拷貝有網電腦的"C:\Users\XXX帳戶文件夾\"中的".vue-templates"到相同路徑。(若是不存在,則執行"vue init webpack XXX文件夾",將會自動生成)
方法一:項目離線建立
在開發機中啓動cmd,cd到指定目錄。eg:輸入"d:",到d盤;輸入"cd projectA",到項目所在文件夾下。
輸入命令"vue init webpack XXX文件夾 --offline",注意:XXX文件夾,指的是將要建立的存儲文件夾。
按照步驟完成操做:(Vue build 改成選擇runtime;最後一個選擇Yes,use npm) 
輸入命令"cd XXX文件夾",運行npm install安裝依賴。
輸入命令"npm run dev",啓動項目。
輸入命令"npm run build",創建index.html啓動項。
若是有錯誤:全局安裝的 webpack運行時 報錯 Error: Cannot find module 'webpack'。解決方法:添加系統環境變量,變量名爲:NODE_PATH;變量值爲:你的npm下的node_modules文件夾絕對路徑。
方法二:項目遷移
在有網電腦按照方法一建立項目。
將項目文件夾拷貝到開發機上運行便可。

html

 

參考文檔:http://www.javashuo.com/article/p-rkokftgh-bd.htmlvue

相關文章
相關標籤/搜索