前言

難點(diǎn)來(lái)自于需求，好??那我們就說(shuō)說(shuō)我是因?yàn)槭裁葱枨竽兀?/p>

需求：我要通過(guò)【頁(yè)面ID】訪問(wèn)接口數(shù)據(jù)，進(jìn)行Vue模塊化構(gòu)建包含【頁(yè)面數(shù)據(jù)】的靜態(tài)頁(yè)面。我有很多的頁(yè)面ID!!!（不要糾結(jié)為啥有這樣的需求，干就完了）

思路：

• 1.通過(guò)命令行打包時(shí)傳入【頁(yè)面ID】
• 2.Vue構(gòu)建過(guò)程中訪問(wèn)接口生成靜態(tài)頁(yè)面
• 3.發(fā)布部署

重點(diǎn) vue.config.js

vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。如果沒(méi)有需要你自己創(chuàng)建一個(gè)

重點(diǎn)

• Vue CLI 構(gòu)建命令配置參數(shù)就是修改構(gòu)建環(huán)境變量和模式；
• 可以在 vue.config.js 文件中計(jì)算環(huán)境變量；
• 只有以 VUE_APP_ 開(kāi)頭的變量會(huì)被靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問(wèn)它們：

console.log(process.env.VUE_APP_PAGE_ID)

除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量：

• NODE_ENV - 會(huì)是 “development”、“production” 或 “test” 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。
• BASE_URL - 會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。

在 vue.config.js 文件中計(jì)算環(huán)境變量

配置

代碼

vue.config.js 文件全部代碼

• npm指令需要讀取 process.env.npm_config_argv
• vue-cli-service指令需要讀取 process.argv

// 解析指令參數(shù)
// 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 = {};
// 獲取自定義參數(shù)
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("頁(yè)面ID：" + process.env.VUE_APP_PAGE_ID)

// VUE 平臺(tái)配置內(nèi)容
module.exports = {
    productionSourceMap: false
}

命令

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

日志

使用

代碼

日志輸出

擴(kuò)展

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

ps：本人自己都嘗試過(guò)，感覺(jué)做程序員好難

第一種

npm run serve -- --pageId=P312

第二種

npm run serve pageId=P312

好了就這樣吧，自己遇見(jiàn)什么情況自己運(yùn)行一下。

注意：不同的命令輸入方式解析參數(shù)值的方式不同

彩蛋

紅框內(nèi)可以配置參數(shù)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論