欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年04月29日 10:52:11   作者：碼磚咋說  
這篇文章主要介紹了Vue CLI 命令行打包配置自定義參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

難點來自于需求，好??那我們就說說我是因為什么需求呢？

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

思路：

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

重點 vue.config.js

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

重點

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

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

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

在 vue.config.js 文件中計算環(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("頁面ID：" + process.env.VUE_APP_PAGE_ID)

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

命令

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

日志

使用

代碼

日志輸出

擴(kuò)展

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

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

第一種

npm run serve -- --pageId=P312

第二種

npm run serve pageId=P312

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

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

彩蛋

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

總結(jié)

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

相關(guān)文章

  • vue實現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計

    vue實現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計

    這篇文章主要為大家介紹了vue實現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-07-07
  • Vue不能觀察到數(shù)組length的變化

    Vue不能觀察到數(shù)組length的變化

    因為vue的響應(yīng)式是通過 Object.defineProperty 來實現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下
    2018-06-06
  • vue+elementUI中表格高亮或字體顏色改變操作

    vue+elementUI中表格高亮或字體顏色改變操作

    這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue實現(xiàn)日歷表格（element-ui）

    vue實現(xiàn)日歷表格（element-ui）

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例

    Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例

    這篇文章主要介紹了Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue加載json文件的方法簡單示例

    Vue加載json文件的方法簡單示例

    這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實例形式分析了vue.js針對json文件的加載及數(shù)據(jù)讀取等相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • Vue開發(fā)實例探究key的作用詳解

    Vue開發(fā)實例探究key的作用詳解

    這篇文章主要為大家介紹了Vue開發(fā)實例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • 解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?status?code?400"

    解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?s

    這篇文章主要給大家介紹了關(guān)于如何解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?status?code?400"的相關(guān)資料,在Vue應(yīng)用程序中我們通常會使用axios作為網(wǎng)絡(luò)請求庫,需要的朋友可以參考下
    2023-07-07
  • 詳解在Vue中通過自定義指令獲取dom元素

    詳解在Vue中通過自定義指令獲取dom元素

    本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。
    2017-03-03

最新評論