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

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

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

離線搭建vue環(huán)境運行項目步驟

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

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

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

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運行命令:

npm config get cache

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

2）進入目標目錄下，找到目錄下的文件夾npm-cache,復制U盤或者光盤中

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

命令行運行 npm root -g 查看全局安裝目錄；然后把npm-cache緩存目錄復制到npm目錄里面（如果放到同級會報錯）

進入全局目錄（node_modules的上一級目錄）,把npm-cache文件夾放進去

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

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項目復制到內(nèi)網(wǎng) 包括node_modules文件夾（注意 mac和windows依賴包不能共用）

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

正常：