這個需求是源於我們要根據一個項目,針對某些組件(比如:日期 和 下拉組件 ) 和 頁面 做終端的兼容,最終需要實現打包成2個平台:h5 和 pc
H5平台,日期組件:
PC平台,日期組件:
首先,我們在 package.json-> scripts 里通過參數來區分‘平台’。建議使用 cross-env 去做平台的區分,因為我發現 vue-cli 使用起來太繁瑣,需要定義.env文件來區分平台
然后:需要設置 pages 多頁對象
!!!注意,【第一個坑】來了~~~~,,,這里需要根據配置的多頁pages對象的key去找到相應的模版 config.plugin('html-${key}') ,而不是 config.plugin('html')
!!!注意,【第二個坑】來了~~~~,,, 這里 main.js 獲取不到環境變量,因為這里的 process.env 獲取到的是.env文件配置的環境變量
解決方案-1,是可以通過注入全局變量:window.BUILD_APP_PLATFORM; (請看圖-2👇)
圖-1:
圖-2,請看最上面第二張圖片
config.plugin(`html-${key}`).tap(args => { args[0]['platform'] = process.env.APP_PLATFORM; }
解決方案-2:通過動態注入環境變量到 process.env 里 ,彌補.env文件只能注入靜態的缺陷
【注意】這個時候 main.js 就能獲取到 APP_PLATFORM 環境變量了
代碼實現的細節不再這里細將,執行 npm run build 的最終效果如下: