快捷導(dǎo)航

離線搭建vue環(huán)境運(yùn)行項(xiàng)目完整步驟

更新時(shí)間：2023年06月01日 14:35:25 作者：張藜瀠

這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

離線搭建vue環(huán)境運(yùn)行項(xiàng)目步驟

公司開發(fā)環(huán)境使用內(nèi)網(wǎng)，無法用外網(wǎng)，搭建環(huán)境的時(shí)候，發(fā)現(xiàn)內(nèi)網(wǎng)系統(tǒng)沒有安裝vue腳手架。

注意： 首先保持外網(wǎng)node、npm和內(nèi)網(wǎng)node、npm版本一致。npm被集成在nodejs中，而安裝nodejs只需要把nodejs安裝包c(diǎn)opy到內(nèi)網(wǎng)電腦安裝。

1.在外網(wǎng)電腦上，使用npm install -g xxxx命令下載好我們所需要的各個(gè)安裝包，比如：

npm install -g @vue/cli 
npm install -g typescript
npm install vite -g
npm install -g pnpm
npm install --global webpack
npm install webpck-cli -g

2. 查看npm全局安裝包的存放目錄（外網(wǎng)電腦npm-cache緩存目錄）

1）cmd運(yùn)行命令:

npm config get cache

C:\Users\zhangliying\AppData\Local\npm-cache

2）進(jìn)入目標(biāo)目錄下，找到目錄下的文件夾npm-cache,復(fù)制U盤或者光盤中

3.內(nèi)網(wǎng)全局安裝目錄

命令行運(yùn)行 npm root -g 查看全局安裝目錄；然后把npm-cache緩存目錄復(fù)制到npm目錄里面（如果放到同級(jí)會(huì)報(bào)錯(cuò)）

進(jìn)入全局目錄（node_modules的上一級(jí)目錄）,把npm-cache文件夾放進(jìn)去

4. 在內(nèi)網(wǎng)電腦上npm下運(yùn)行安裝命令，安裝離線包：

npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false @vue/cli
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false typescript
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpack-cli
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpack
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false pnpm
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false  vite

5.把vue項(xiàng)目復(fù)制到內(nèi)網(wǎng) 包括node_modules文件夾（注意 mac和windows依賴包不能共用）

6.查看全局命令是否正常 npm list -global --debth 0

正常：