vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式
準備
準備兩臺電腦,一臺能上網(wǎng),一臺開發(fā)機器(不能上網(wǎng))。
兩臺電腦分別安裝最新版Nodejs的包管理器,以便使用npm命令。(備注:Nodejs自帶npm)
資源下載
在有網(wǎ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,前者是比較復雜專業(yè)的項目,他的配置并不全放在根目錄下的 webpack.config.js 中。
在cmd中,輸入"npm install webpack-dev-server -g",下載到全局路徑node_modules文件夾下。注意:是為了規(guī)避錯誤"執(zhí)行 node start env提示 'webpack-dev-server' 不是內(nèi)部或外部命令,也不是可運行的程序"。
在cmd中,輸入"npm install -D webpack-cli -g",下載到全局路徑node_modules文件夾下。注意:是為了規(guī)避錯誤“Cannot find module 'webpack/bin/config-yargs'”。
在cmd中,輸入"npm install html-webpack-plugin -g",下載到全局路徑node_modules文件夾下。注意:是為了規(guī)避錯誤“Cannot find module 'html-webpack-plugin'”。
下載后的文件在"C:\Users\XXX賬戶文件夾\AppData\Roaming\npm\node_modules"。
資源遷移
拷貝有網(wǎng)電腦的"C:\Users\XXX賬戶文件夾\AppData\Roaming\"中的"npm"和"npm-cache"兩個文件夾到開發(fā)機的相同路徑。
拷貝有網(wǎng)電腦的"C:\Users\XXX賬戶文件夾\"中的".vue-templates"到相同路徑。(如果不存在,則執(zhí)行"vue init webpack XXX文件夾",將會自動生成)
方法一:項目離線創(chuàng)建
在開發(fā)機中啟動cmd,cd到指定目錄。eg:輸入"d:",到d盤;輸入"cd projectA",到項目所在文件夾下。
輸入命令"vue init webpack XXX文件夾 --offline",注意:XXX文件夾,指的是將要創(chuàng)建的存儲文件夾。
按照步驟完成操作:(Vue build 改為選擇runtime;最后一個選擇Yes,use npm)

輸入命令"cd XXX文件夾",運行npm install安裝依賴。
輸入命令"npm run dev",啟動項目。
輸入命令"npm run build",建立index.html啟動項。
如果有錯誤:全局安裝的 webpack運行時 報錯 Error: Cannot find module 'webpack'。
解決方法:添加系統(tǒng)環(huán)境變量,變量名為:NODE_PATH;變量值為:你的npm下的node_modules文件夾絕對路徑。
方法二:項目遷移
在有網(wǎng)電腦按照方法一創(chuàng)建項目。
將項目文件夾拷貝到開發(fā)機上運行即可。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue初始化項目一直停在downloading template的問題
這篇文章主要介紹了解決vue初始化項目一直停在downloading template的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
Nuxt.js nuxt-link與router-link的區(qū)別說明
這篇文章主要介紹了Nuxt.js nuxt-link與router-link的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng))
這篇文章主要介紹了vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng)),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-02-02
解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新)
這篇文章主要介紹了解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決vue打包后刷新頁面報錯:Unexpected token <
這篇文章主要介紹了解決vue打包后刷新頁面報錯:Unexpected token <相關(guān)知識點,需要的朋友們參考下。2019-08-08

