如何使用 Vue 來實現乙個專案多平台打包

2022-02-17 04:03:45 字數 1644 閱讀 7492

這個需求是源於我們要根據乙個專案,針對某些元件(比如:日期 和 下拉元件 ) 和 頁面 做終端的相容,最終需要實現打包成2個平台:h5 和 pc

h5平台,日期元件:                               

pc平台,日期元件:

首先,我們在 package.json-> scripts 裡通過引數來區分『平台』。建議使用cross-env去做平台的區分,因為我發現 vue-cli 使用起來太繁瑣,需要定義.env檔案來區分平台

然後:需要設定 pages 多頁物件

!!!注意,【第乙個坑】來了~~~~,,,

這裡需要根據配置的多頁pages物件的key去找到相應的模版 config.plugin('html-$') ,而不是 config.plugin('html') 

!!!注意,【第二個坑】來了~~~~,,, 這裡 main.js 獲取不到環境變數,因為這裡的

process.env 獲取到的是.env檔案配置的環境變數

解決方案-1,是可以通過注入全域性變數

圖-1:

圖-2,請看最上面第二張

解決方案-2:通過動態注入環境變數到 process.env 裡 ,

彌補.env檔案只能注入靜態的缺陷

【注意】

環境變數了

**實現的細節不再這裡細將,執行npm run build的最終效果如下:

自己來搭乙個vue專案

準備npm node cli 檢查方式 npm v node v vue version shift 滑鼠右鍵 開啟 powershell 如果沒許可權 管理員身份開啟powershell set executionpolicy remotesigned 選擇yvue create 專案名 空格選中...

vue如何新建乙個專案

身為入行未深的小白前端,不斷的學習是我們不可丟失的習慣。前端流行的框架也是層出不窮,vue在眾多框架中脫穎而出。今天花了兩個小時的時間自己走了一邊建立vue專案的流程,跟你們分享。1 開啟cmd命令列,首先安裝node 2 npm包管理器是整合在node中的,所以直接輸入npm v就能檢視到版本資訊...

如何執行乙個Vue專案

一開始很多剛入手vue.js的人,會扒github上的開源專案,但是發現不知如何執行github上的開源專案,很尷尬。通過查閱網上教程,成功搭建好專案環境,同時對前段工程化有了朦朦朧朧的認知,因此將環境搭建過程分享給大家。首先,列出來我們需要的東西 node.js環境 npm包管理器 vue cli...