1、一般打包 ：直接 npm run build。（webpack的文件，根據不同的命令，執行不同的代碼的）

注：這種打包的靜態文件，只能放在web服務器中的根目錄下才能運行。

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

參考：https://segmentfault.com/a/1190000014561644

3、在本地文件系統中打開，不需要web服務器

暫時 不清楚

4、使用 history模式 打包的 配置 ： http://tigerliu.site/2018/10/vue-history/ （親測有效，配置很簡單）

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

location / {try_files $uri $uri/ /index.html; }

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

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

5、修改Vue打包后的默認文件名 ： https://blog.csdn.net/daotiao0199/article/details/84777955

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

參考：https://blog.csdn.net/qq_34322905/article/details/84319010（親測有效。理解了程序，webpack.dev.conf.js文件是可以不用改的，使用process.env.NODE_ENV 區分）

多個服務器（web服務器和后臺服務器在一個域名下），如測試環境(接口調用的是測試環境的域名)、正式環境（接口調用的是正式環境的域名）

注意：調接口的地址域名不要寫死，使用 / 開頭表示根域名下的地址。不同的環境，如果只是域名的不同，完全不需要區分測試環境還是正式環境。根域名會自動添加的。

難點：1、npm命令 中的 參數，在 webpack程序中是可以獲取到的。如：npm run build --test ，參數test 在webpack程序中可以獲取這個值。 http://nodejs.cn/api/process.html#process_process_argv

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

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

const argv = JSON.parse(process.env.npm_config_argv).original || process.argv // 個人覺得這里的 process.argv 是多余的。使用npm命令時，process.env.npm_config_argv 變量肯定是有數據的。

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

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

const HOST_ENV = argv[argv.length - 1] ? argv[argv.length - 1].replace(/[^a-z]+/ig,"") : '' // npm和cnpm 命令下，--test參數都是在數組 argv 的最后面.

7、vue-cli 中 通過配置，webpack 中的常量 可以在 前端js中使用（環境變量就是這樣實現的）。 https://www.jianshu.com/p/887f0454ef96（推薦） 或 https://www.cnblogs.com/xiaofenguo/p/9994629.html

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

new webpack.DefinePlugin({'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"', // 這里屬性名process.env.BASE_URL的配置是給前端js使用的，屬性值中process.env.BASE_URL是node的全局變量，所有的node程序都可以使用，但是前端的js是不能使用的。'process.env.HANGZHOU': '"hangzhou"',}),

總結

以上是生活随笔為你收集整理的vue-cli 打包部署的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。