vue-cli 打包部署

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

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

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

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

 

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

　  暫時 不清楚

四、使用 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模式下，不一樣的地址相對路徑是不同的。

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

六、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服務器和後臺服務器在一個域名下），如測試環境(接口調用的是測試環境的域名)、正式環境（接口調用的是正式環境的域名）

　　注意：調接口的地址域名不要寫死，使用 / 開頭表示根域名下的地址。不一樣的環境，若是隻是域名的不一樣，徹底不須要區分測試環境仍是正式環境。根域名會自動添加的。

　　難點：一、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 變量確定是有數據的。

　　　　　二、經過配置，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 的最後面.

七、vue-cli 中 經過配置，webpack 中的常量 能夠在 前端js中使用（環境變量就是這樣實現的）。 https://www.jianshu.com/p/887f0454ef96（推薦）  或 http://www.javashuo.com/article/p-wpofiypb-bo.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"',
    }),