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

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

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

1.在外網電腦上，使用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全局安裝包的存放目錄（外網電腦npm-cache緩存目錄）

1）cmd運行命令:

npm config get cache

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

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

3.內網全局安裝目錄

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

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

 4. 在內網電腦上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項目復制到內網 包括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. 在外網找到 C:\Users\zhangliying\AppData\Roaming\npm 、npm-cache包，把npm、npm-cache包，復制U盤或者光盤中

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

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

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

 把路徑替換城內網安裝路徑，保存關閉

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

vue --version
vite --version

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

解決方法：

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

2.然后安裝插件，內網測試

3.移動頁面，依次解決

總結 

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

最新評論