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

注：這種打包的靜態(tài)文件，只能放在web服務(wù)器中的根目錄下才能運(yùn)行。

2、在服務(wù)器中 非根目錄下 運(yùn)行的 打包：需要配置

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

3、在本地文件系統(tǒng)中打開(kāi)，不需要web服務(wù)器

暫時(shí) 不清楚

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

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

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

注意：代碼中的相對(duì)路徑是以瀏覽器上 地址 為參考的，而不是文件所在目錄（一般情況這兩個(gè)是統(tǒng)一的，但是服務(wù)器配置過(guò)就不一定了。比如瀏覽器請(qǐng)求a文件，服務(wù)器把b文件給瀏覽器，這個(gè)時(shí)候b文件的相對(duì)路徑是以u(píng)rl的地址為參考的，即a的url地址）。

單頁(yè)應(yīng)用，hash模式的url地址是不變的（變的是hash值），所以打包后 頁(yè)面的相對(duì)路徑 都是相對(duì)index頁(yè)面。但是history模式下，瀏覽器地址是改變的，所以直接把hash模式轉(zhuǎn)化為history模式會(huì)出現(xiàn)錯(cuò)誤。因?yàn)閔istory模式下，不同的地址相對(duì)路徑是不一樣的。

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

6、vue-cli 不同環(huán)境打包 不同的接口地址 ：需要單獨(dú)這種區(qū)分的，一般是不同環(huán)境接口地址改變的不只是域名，主要是地址的目錄不同。如：one.vom/test/api 和 two.com/pro/api 這兩個(gè)環(huán)境根域名下的目錄是不同的，這兩個(gè)環(huán)境的打包就需要區(qū)分開(kāi)來(lái)了。

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

多個(gè)服務(wù)器（web服務(wù)器和后臺(tái)服務(wù)器在一個(gè)域名下），如測(cè)試環(huán)境(接口調(diào)用的是測(cè)試環(huán)境的域名)、正式環(huán)境（接口調(diào)用的是正式環(huán)境的域名）

注意：調(diào)接口的地址域名不要寫死，使用 / 開(kāi)頭表示根域名下的地址。不同的環(huán)境，如果只是域名的不同，完全不需要區(qū)分測(cè)試環(huán)境還是正式環(huán)境。根域名會(huì)自動(dòng)添加的。

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

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

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

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

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

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

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

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

webpack在編譯 前端代碼時(shí)，碰到 這種 常量 直接做文本替換（即打包后的代碼中是沒(méi)有這個(gè)常量的，只有對(duì)應(yīng)的值），指定的值必須包括引號(hào)。

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"',}),

總結(jié)

以上是生活随笔為你收集整理的vue-cli 打包部署的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。