離線搭建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,復(fù)制U盤或者光盤中

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

命令行運行 npm root -g 查看全局安裝目錄；然后把npm-cache緩存目錄復(fù)制到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項目復(fù)制到內(nèi)網(wǎng) 包括node_modules文件夾 （注意 mac和windows依賴包不能共用）

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

正常：

異常：

npm list -global --depth 0
--(empty)

解決方法：

npm root -g 命令找到npm文件夾

刪除與npm目錄同級的node_modules文件夾

把npm-cache文件夾放到npm目錄里面

運行項目

如果上邊步驟項目運行不起來

7. 在外網(wǎng)找到 C:\Users\zhangliying\AppData\Roaming\npm 、npm-cache包，把npm、npm-cache包，復(fù)制U盤或者光盤中

8. 在內(nèi)網(wǎng)上，找到npm安裝路徑，npm root -g，把npm和npm-cache兩個文件直接放進去替換原來的文件

9.配置環(huán)境變量

10.在進入npm下的node_modules的下一級目錄npm,找到文件npmrc用記事本打開，把外網(wǎng)的路徑替換為內(nèi)網(wǎng)的路徑

 把路徑替換城內(nèi)網(wǎng)安裝路徑，保存關(guān)閉

此時我們再運行cmd命令窗口，發(fā)現(xiàn)我們的vue環(huán)境就成功安裝好了！

vue --version
vite --version

如果是項目運行不起來報錯如下：

解決方法：

1.重新創(chuàng)建一個空項目，放到內(nèi)網(wǎng)上測試

2.然后安裝插件，內(nèi)網(wǎng)測試

3.移動頁面，依次解決

總結(jié) 

到此這篇關(guān)于離線搭建vue環(huán)境運行項目的文章就介紹到這了,更多相關(guān)安裝離線vue環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論