vue cli 打包部署

1、一般打包：直接 npm run build。（webpack的檔案，根據不同的命令，執行不同的**的）

注：這種打包的靜態檔案，只能放在web伺服器中的根目錄下才能執行。

2、在伺服器中非根目錄下執行的打包：需要配置

參考：3、在本地檔案系統中開啟，不需要web伺服器

暫時不清楚

4、使用 history模式打包的配置：（親測有效，配置很簡單）

nginx 伺服器下配置：在location下加 try_files $uri $uri/ /index.html; 就可以了

location /

注意：**中的相對路徑是以瀏覽器上位址為參考的，而不是檔案所在目錄（一般情況這兩個是統一的，但是伺服器配置過就不一定了。比如瀏覽器請求a檔案，伺服器把b檔案給瀏覽器，這個時候b檔案的相對路徑是以url的位址為參考的，即a的url位址）。

單頁應用，hash模式的url位址是不變的（變的是hash值），所以打包後頁面的相對路徑都是相對index頁面。但是history模式下，瀏覽器位址是改變的，所以直接把hash模式轉化為history模式會出現錯誤。因為history模式下，不同的位址相對路徑是不一樣的。

5、修改vue打包後的預設檔名：

6、vue-cli 不同環境打包不同的介面位址：需要單獨這種區分的，一般是不同環境介面位址改變的不只是網域名稱，主要是位址的目錄不同。如：one.vom/test/api 和 two.com/pro/api 這兩個環境根網域名稱下的目錄是不同的，這兩個環境的打包就需要區分開來了。

參考：親測有效。理解了程式，webpack.dev.conf.js檔案是可以不用改的，使用process.env.node_env 區分）

多個伺服器（web伺服器和後台伺服器在乙個網域名稱下），如測試環境(介面呼叫的是測試環境的網域名稱)、正式環境（介面呼叫的是正式環境的網域名稱）

注意：調介面的位址網域名稱不要寫死，使用 / 開頭表示根網域名稱下的位址。不同的環境，如果只是網域名稱的不同，完全不需要區分測試環境還是正式環境。根網域名稱會自動新增的。

難點：1、npm命令中的引數，在 webpack程式中是可以獲取到的。如：npm run build --test ，引數test 在webpack程式中可以獲取這個值。

process.env.npm_config_ar** 【npm 命令，獲取到的引數。node命令的話，這個變數是undefined】。如：npm run start --test 。使用npm_config_ar**變數可以正常獲取到 test引數

process.ar** 【node命令可以正常獲取到 node命令相關引數。npm命令的話，這個變數返回的陣列中不帶引數】。如：node test.js --test 。使用 ar**可以正常獲取到 test引數

const ar** =
json
.parse
(process.env.npm_config_ar**)
.original || process.ar** // 個人覺得這裡的 process.ar** 是多餘的。使用npm命令時，process.env.npm_config_ar** 變數肯定是有資料的。

2、通過配置，webpack程式中的變數值（常量），在前端js中是獲取獲取到的。編譯時直接文字替換。

注意：cnpm 和 npm 命令打包後，process.env.npm_config_ar** 獲取的陣列是不一樣的。參考鏈結上的處理，只是針對npm進行處理的，cnpm是會有問題的。下面是我的改進（改進後npm和cnpm都可以正常打包）：

const
host_env
= ar**[ar**.length -1]
? ar**[ar**.length -1]
.replace
(/[^a-z]+/ig,""
):''// npm和cnpm 命令下，--test引數都是在陣列 ar** 的最後面.

7、vue-cli 中通過配置，webpack 中的常量可以在前端js中使用（環境變數就是這樣實現的）。推薦）或

webpack在編譯前端**時，碰到這種常量直接做文字替換（即打包後的**中是沒有這個常量的，只有對應的值），指定的值必須包括引號。

new
webpack.defineplugin()
,

vue cli 打包部署

Vue cli3 0打包部署到Nginx

vue cli打包遇到的問題

vue cli專案webpack打包結構

vue cli 打包部署

Vue cli3 0打包部署到Nginx

vue cli打包遇到的問題

vue cli專案webpack打包結構

相關推薦