Vue CLI 命令行打包配置自定義參數方式

Posted on by

前言

難點來自於需求，好👍那我們就說說我是因為什麼需求呢？

需求：我要通過【頁面ID】訪問接口數據，進行Vue模塊化構建包含【頁面數據】的靜態頁面。我有很多的頁面ID!!!（不要糾結為啥有這樣的需求，幹就完瞭）

思路：

  • 1.通過命令行打包時傳入【頁面ID】
  • 2.Vue構建過程中訪問接口生成靜態頁面
  • 3.發佈部署

重點 vue.config.js

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。如果沒有需要你自己創建一個

重點

  • Vue CLI 構建命令配置參數就是修改構建環境變量和模式；
  • 可以在 vue.config.js 文件中計算環境變量；
  • 隻有以 VUE_APP_ 開頭的變量會被靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：
console.log(process.env.VUE_APP_PAGE_ID)

除瞭 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：

  • NODE_ENV – 會是 “development”、“production” 或 “test” 中的一個。具體的值取決於應用運行的模式。
  • BASE_URL – 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

在 vue.config.js 文件中計算環境變量

配置

代碼

vue.config.js 文件全部代碼

  • npm指令需要讀取 process.env.npm_config_argv
  • vue-cli-service指令需要讀取 process.argv
// 解析指令參數
// npm指令需要讀取 process.env.npm_config_argv
const argv = JSON.parse(process.env.npm_config_argv);
// vue-cli-service指令需要讀取 process.argv，我用的是npm
const argv1 = process.argv;

console.log("process.env.npm_config_argv值", argv)
console.log("process.argv值", argv1)

const config = {};
// 獲取自定義參數
let idx = 2;
const cooked = argv.cooked;
const length = argv.cooked.length;
while ((idx += 2) <= length) {
    config[cooked[idx - 2]] = cooked[idx - 1];
}

process.env.VUE_APP_PAGE_ID = config['--pageId']
console.log("頁面ID：" + process.env.VUE_APP_PAGE_ID)

// VUE 平臺配置內容
module.exports = {
    productionSourceMap: false
}

命令

liukeruideMacBook-Pro:vuedemo liukerui$ npm run serve --pageId=P312

日志

使用

代碼

日志輸出

擴展

按照我上面描述的配置成功是沒問題的。但是作為低調的程序員我們要嘗試一下其它輸入命令的方式看看輸出的日志：

ps：本人自己都嘗試過，感覺做程序員好難

第一種

npm run serve -- --pageId=P312

第二種

npm run serve pageId=P312

好瞭就這樣吧，自己遇見什麼情況自己運行一下。

註意：不同的命令輸入方式解析參數值的方式不同

彩蛋

紅框內可以配置參數

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：