如何使用 Vue 來實現一個項目多平台打包?


這個需求是源於我們要根據一個項目,針對某些組件(比如:日期 和 下拉組件 ) 和 頁面 做終端的兼容,最終需要實現打包成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 的最終效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM