前端vite+vue3——利用環境變量和路由區分h5、pc模塊打包（從0到1）

yma16-logo

?前言

大家好，我是yma16，本文分享 前端vite+vue3——利用環境變量和路由對前端區分h5和pc模塊打包（從0到1）。

背景：

前端本地開發pc和h5的項目，發布時需要區分開h5和pc的頁面

vite

Vite 通過在一開始將應用中的模塊區分為 依賴 和 源碼 兩類，改進了開發服務器啟動時間。

  • 依賴 大多為在開發時不會變動的純 JavaScript。一些較大的依賴（例如有上百個模塊的組件庫）處理的代價也很高。依賴也通常會存在多種模塊化格式（例如 ESM 或者
    CommonJS）。

Vite 將會使用 esbuild 預構建依賴。esbuild 使用 Go 編寫，并且比以 JavaScript 編寫的打包器預構建依賴快
10-100 倍。

  • 源碼 通常包含一些并非直接是 JavaScript 的文件，需要轉換（例如 JSX，CSS 或者 Vue/Svelte 組件），時常會被編輯。同時，并不是所有的源碼都需要同時被加載（例如基于路由拆分的代碼模塊）。

Vite 以 原生 ESM 方式提供源碼。這實際上是讓瀏覽器接管了打包程序的部分工作：Vite
只需要在瀏覽器請求源碼時進行轉換并按需提供源碼。根據情景動態導入代碼，即只在當前屏幕上實際使用時才會被處理。

vite

node系列往期文章
node_windows環境變量配置
node_npm發布包
linux_配置node
node_nvm安裝配置
node筆記_http服務搭建（渲染html、json）
node筆記_讀文件
node筆記_寫文件
node筆記_連接mysql實現crud
node筆記_formidable實現前后端聯調的文件上傳
node筆記_koa框架介紹
node_koa路由
node_生成目錄
node_讀寫excel
node筆記_讀取目錄的文件
node筆記——調用免費qq的smtp發送html格式郵箱
node實戰——搭建帶swagger接口文檔的后端koa項目（node后端就業儲備知識）
node實戰——后端koa結合jwt連接mysql實現權限登錄（node后端就業儲備知識）
node實戰——koa給郵件發送驗證碼并緩存到redis服務（node后端儲備知識）

koa系列項目文章
前端vite+vue3結合后端node+koa——實現代碼模板展示平臺（支持模糊搜索+分頁查詢）
node+vue3+mysql前后分離開發范式——實現對數據庫表的增刪改查
node+vue3+mysql前后分離開發范式——實現視頻文件上傳并渲染

koa-vue性能監控到封裝sdk系列文章
性能監控系統搭建——node_koa實現性能監控數據上報（第一章）
性能監控系統搭建——vue3實現性能監控數據展示（第二章）
性能監控計算——封裝帶性能計算并上報的npm包（第三章）

?初始化前端項目到打包

思路：利用打包時候的變量去區分是否打包需要的路由，即需要區分pc端和h5的路由。
example：這里我使用element-plus模擬pc端頁面，vant模擬移動端頁面。
對比組件：時間選擇
基本的package.json

{"name": "vue-with-vite","version": "0.0.0","scripts": {"dev": "vite","build": "vite build","build-h5": "vite build --mode h5","build-pc": "vite build --mode pc","preview": "vite preview --port 4173"},"dependencies": {"element-plus": "^2.7.3","vant": "^4.9.1","vue": "^3.2.37","vue-router": "^4.4.0"},"devDependencies": {"@types/node": "^18.19.6","@vitejs/plugin-vue": "^4.0.0","prettier": "^3.2.2","typescript": "^4.9.3","vite": "^4.0.0","vue-tsc": "^1.0.11"}
}

💖配置vite變量文件

配置env文件

env
# .env
VITE_APP_TITLE=My App (staging)
VITE_BUILD_MODE=dev# .env.h5
NODE_ENV=production
VITE_APP_TITLE=My App (staging)
VITE_BUILD_MODE=h5# .env.pc
NODE_ENV=production
VITE_APP_TITLE=My App (staging)
VITE_BUILD_MODE=PC

對應文件位置如下
env.file

💖配置vite打包時的區分路徑

vite.config.tsn內容配置如下

// @ts-ignore
import { defineConfig,loadEnv } from 'vite'
import { resolve } from "path";
// @ts-ignore
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
// @ts-ignore
export default defineConfig(({mode})=>{// 運行模式console.log('mode',mode)// 當前路徑console.log('process.cwd()',process.cwd())// @ts-ignoreconst env=loadEnv(mode,process.cwd())console.log('env',env)return {// 打包相對路徑base: '/',build:{// 輸出的目錄  h5 pcoutDir:'dist/'+env.VITE_BUILD_MODE},server: {host:true,},resolve: {alias: {"@": resolve(__dirname, "src"),},},plugins: [vue()],}
});

💖h5頁面

MobilePage.vue主要顯示移動端時間選擇

<template><van-cell title="選擇單個日期" :value="date" @click="show = true" /><van-calendar v-model:show="show" @confirm="onConfirm" />
</template><script setup>import { ref } from 'vue';const date = ref('');const show = ref(false);const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;const onConfirm = (value) => {show.value = false;date.value = formatDate(value);};
</script>

頁面效果：
h5-page

💖pc頁面

WebPage.vue主要顯示網頁選擇時間

<template><div class="demo-date-picker"><el-date-pickerv-model="value"type="date"placeholder="Pick a day"format="YYYY/MM/DD"value-format="YYYY-MM-DD"><template #default="cell"><div class="cell" :class="{ current: cell.isCurrent }"><span class="text">{{ cell.text }}</span><span v-if="isHoliday(cell)" class="holiday" /></div></template></el-date-picker></div>
</template><script setup>import { ref } from 'vue'const value = ref('2021-10-29')const holidays = ['2021-10-01','2021-10-02','2021-10-03','2021-10-04','2021-10-05','2021-10-06','2021-10-07',]const isHoliday = ({ dayjs }) => {return holidays.includes(dayjs.format('YYYY-MM-DD'))}
</script><style scoped>.cell {height: 30px;padding: 3px 0;box-sizing: border-box;}.cell .text {width: 24px;height: 24px;display: block;margin: 0 auto;line-height: 24px;position: absolute;left: 50%;transform: translateX(-50%);border-radius: 50%;}.cell.current .text {background: #626aef;color: #fff;}.cell .holiday {position: absolute;width: 6px;height: 6px;background: var(--el-color-danger);border-radius: 50%;bottom: 0px;left: 50%;transform: translateX(-50%);}
</style>

頁面效果
pc-page

💖關鍵router配置：區分打包路由

main.js的入口文件區分打包

// @ts-ignore
import { createApp } from 'vue'
// @ts-ignore
import App from './App.vue'
// 路由
// @ts-ignore
import router from "./router/index.ts";// pc 端 element-plus
// @ts-ignore
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 移動端 vant
// 1. 引入你需要的組件
// @ts-ignore
import { Calendar,Cell } from 'vant';
// 2. 引入組件樣式
import 'vant/lib/index.css';const app=createApp(App)
app.use(router)// 環境變量
// @ts-ignore
const env = import.meta.env
console.log('env', env)
const { VITE_BUILD_MODE } = env
if (VITE_BUILD_MODE === 'h5') {
// h5 組件app.use(Calendar)app.use(Cell)
}
else if(VITE_BUILD_MODE === 'pc'){
//pc 組件app.use(ElementPlus)
}
else if(VITE_BUILD_MODE === 'dev'){
// dev開發模式 h5 組件 pc組件都引入app.use(Calendar)app.use(Cell)app.use(ElementPlus)
}app.mount('#app')

router/index.ts 路由配置，讀取目錄modules下的h5和pc路由

// @ts-ignore
import * as VueRouter from "vue-router";
// @ts-ignore
let modules = []
// @ts-ignore
const routeModuleList = []
// @ts-ignore
console.log('modules', modules)
// 環境變量
// @ts-ignore
const env = import.meta.env
console.log('env', env)
const { VITE_BUILD_MODE } = env
if (VITE_BUILD_MODE === 'h5') {// import.meta.glob() 直接引入所有的模塊 Vite 獨有的功能// @ts-ignoremodules = import.meta.glob('./modules/h5/*.ts', { eager: true });
}
else if(VITE_BUILD_MODE === 'pc'){// import.meta.glob() 直接引入所有的模塊 Vite 獨有的功能// @ts-ignoremodules = import.meta.glob('./modules/pc/*.ts', { eager: true });
}
else if(VITE_BUILD_MODE === 'dev'){// dev 開發模式pc和后所有路徑都加載// @ts-ignoremodules = import.meta.glob('./modules/**/*.ts', { eager: true });
}// 加入到路由集合中
// @ts-ignore
Object.keys(modules).forEach((key) => {
// @ts-ignoreconst mod = modules[key].default || {};const modList = Array.isArray(mod) ? [...mod] : [mod];console.log('modList', modList)// @ts-ignorerouteModuleList.push(...modList);
});// @ts-ignore
console.log('routeModuleList', routeModuleList)
const router = VueRouter.createRouter({// 4. 內部提供了 history 模式的實現。為了簡單起見，我們在這里使用 hash 模式。history: VueRouter.createWebHashHistory(),// @ts-ignoreroutes: routeModuleList,
});
// 路由權限  beforeResolve
// @ts-ignore
router.beforeResolve(async (to, from, next) => {next()
});
export default router;

h5/h5.ts 移動端路由

export default {path: '/h5',name: 'MobilePage',component: () => {// @ts-ignorereturn import('@/components/h5/MobilePage.vue')},meta: {title: 'MobilePage',},children: [],
};

pc/pc.ts 網頁路由


export default {path: '/pc',name: 'WebPage',component: () => {// @ts-ignorereturn import('@/components/pc/WebPage.vue')},meta: {title: 'WebPage',},children: [],
};

💖vite build：h5頁面

運行 build-h5 會拉起 .env.h5變量

# npm run build-h5

打包文件在dist/h5目錄
dist/h5

打開build文件 打包成功！
在這里插入圖片描述

💖vite build：pc頁面

運行 build-pc 會拉起 .env.pc變量

# npm run build-pc

打包文件在dist/pc目錄
dist-dir

打開打包build index頁面
pc-build

?結束

項目地址：https://gitcode.com/qq_38870145/vue-build-pc-h5
gitcode

本文分享到這結束，如有錯誤或者不足之處歡迎指出！
city-light

👍 點贊，是我創作的動力！

?? 收藏，是我努力的方向！

?? 評論，是我進步的財富！

💖 最后，感謝你的閱讀！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/35207.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/35207.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/35207.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

圖片怎么加水印？快來試試這6個圖片加水印方法（2024年新）

圖片怎么加水印？快來試試這6個圖片加水印方法（2024年新）

圖片怎么加水印&#xff1f;作為打工人在日常的工作生活中總會遇到各種各樣的工作難題&#xff0c;相信從事電商或者是設計等工作的小伙伴們&#xff0c;遇到最多的問題應該就是給圖片添加水印了。為什么要給圖片加水印&#xff1f;其實給圖片加水印最主要的目的是保護我們的圖…
閱讀更多...
刷題——二叉樹的中序遍歷

刷題——二叉樹的中序遍歷

雙指針法 void midorder(vector<int>&res, TreeNode* root){if(root NULL) return;midorder(res, root->left);res.push_back(root->val);midorder(res, root->right);}vector<int> inorderTraversal(TreeNode* root) {// write code herevector<…
閱讀更多...
代碼隨想錄算法訓練營第四十九天|LeetCode300 最長遞增子序列、LeetCode674 最長連續遞增序列、LeetCode718 最長重復子數組

代碼隨想錄算法訓練營第四十九天|LeetCode300 最長遞增子序列、LeetCode674 最長連續遞增序列、LeetCode718 最長重復子數組

題1&#xff1a; 指路&#xff1a;300. 最長遞增子序列 - 力扣&#xff08;LeetCode&#xff09; 思路與代碼&#xff1a; 求最長遞增子序列&#xff0c;那么就定義一個數組dp[i]&#xff0c;含義為最長遞增子序列。這里有一個小問題&#xff0c;這里的序列的范圍為何。如果…
閱讀更多...
一文入門Makefile

一文入門Makefile

今天我們來玩玩Makefile。 這邊是借鑒的陳皓老師的《跟我一起寫 Makefile》 pdf下載鏈接如下。 鏈接&#xff1a;https://pan.baidu.com/s/1woRq2nEkgzLv1o5uE0FZHg?pwdmhrh 提取碼&#xff1a;mhrh 我們之前已經算是入門了gcc&#xff0c;那我們的下一站就是Makefile&…
閱讀更多...
http和https請求總結

http和https請求總結

http請求是不安全的請求的端口是80&#xff0c;https請求是安全的請求的端口是443 但是請求安全也不是絕對的。 要想先了解https就的先說幾個概念 1、證書 2、加密算法 openssl TLS/SSL 3、協議x509協議 http傳輸數據都是明文&#xff0c;在數據傳輸的過程會經過很長的鏈路…
閱讀更多...
C#面： 能夠將非靜態的方法覆寫成靜態方法嗎？

C#面： 能夠將非靜態的方法覆寫成靜態方法嗎？

在C#中&#xff0c;不能將非靜態方法覆寫成靜態方法。這是因為靜態方法是屬于類的&#xff0c;而非靜態方法是屬于類的實例的。覆寫&#xff08;重寫&#xff09;是指在派生類中重新實現基類中的虛方法或抽象方法&#xff0c;以改變其行為。而靜態方法是無法被派生類所繼承的&a…
閱讀更多...
嵌入式學習（Day 51:ARM指令/匯編與c語言函數相互調用）

嵌入式學習（Day 51:ARM指令/匯編與c語言函數相互調用）

1.Supervisor模式與SVC模式 Supervisor模式是ARM處理器的一個特權工作模式&#xff0c;允許執行特權指令和訪問特權資源。SVC模式&#xff08;Supervisor Call&#xff09;是與Supervisor模式相關的一個功能或指令&#xff0c;用于從用戶模式切換到Supervisor模式&#xff0c;…
閱讀更多...
1、Redis系列-Redis高性能原理詳解

1、Redis系列-Redis高性能原理詳解

Redis高性能原理詳解 Redis是一款高性能的內存數據庫&#xff0c;廣泛應用于需要快速讀寫訪問的數據密集型應用中。它的高性能得益于多方面的設計和優化。以下是Redis高性能實現的詳細解釋&#xff1a; 1. 單線程架構 Redis采用單線程架構來處理客戶端請求&#xff0c;這與傳…
閱讀更多...
服務器流量收發測試-續篇

服務器流量收發測試-續篇

文章目錄 一、概述二、普通java工程1&#xff0c;pom文件2&#xff0c; 定時任務3&#xff0c;打包4&#xff0c;jar運行 三、打包docker鏡像1&#xff0c;鏡像打包配置docker環境&#xff1a;2&#xff0c;連接遠程鏡像倉庫 四、部署運行1. 容器運行2. 單容器多次運行jar3. 容…
閱讀更多...
大模型應用研發基礎環境配置（Miniconda、Python、Jupyter Lab、Ollama等）

大模型應用研發基礎環境配置（Miniconda、Python、Jupyter Lab、Ollama等）

老牛同學之前使用的MacBook Pro電腦配置有點舊&#xff08;2015 年生產&#xff09;&#xff0c;跑大模型感覺有點吃力&#xff0c;操作起來有點卡頓&#xff0c;因此不得已撿起了塵封了快兩年的MateBook Pro電腦&#xff08;老牛同學其實不太喜歡用 Windows 電腦做研發工作&am…
閱讀更多...
04_記錄鎖

04_記錄鎖

記錄鎖&#xff08;Record Lock&#xff09; 文章目錄 記錄鎖&#xff08;Record Lock&#xff09;簡介原理加鎖流程鎖類型使用場景示例與其他鎖的對比結論 簡介 MySQL 中的記錄鎖&#xff08;Record Lock&#xff09;是行級鎖的一種&#xff0c;用于鎖定數據庫表中的特定行。…
閱讀更多...
從零開始做題:老照片中的密碼

從零開始做題:老照片中的密碼

老照片中的密碼 1.題目 1.1 給出圖片如下 1.2 給出如下提示 這張老照片中的人使用的是莫爾斯電報機&#xff0c;莫爾斯電報機分為莫爾斯人工電報機和莫爾斯自動電報機&#xff08;簡稱莫爾斯快機&#xff09;。莫爾斯人工電報機是一種最簡單的電報機&#xff0c;由三個部分組…
閱讀更多...
SelfReg-UNet：解決UNet語義損失，增強特征一致性與減少冗余的優化模型

SelfReg-UNet：解決UNet語義損失，增強特征一致性與減少冗余的優化模型

SelfReg-UNet&#xff1a;解決UNet語義損失&#xff0c;增強特征一致性與減少冗余的優化模型 提出背景拆解類比&#xff1a;整理書架語義一致性正則化內部特征蒸餾為什么 UNet 會有語義損失&#xff1f; 提出背景 論文&#xff1a;https://arxiv.org/pdf/2406.14896 代碼&…
閱讀更多...
c++內存管理_復習

c++內存管理_復習

new與placement new new&#xff1a; 先調用operator new(大小)&#xff0c;而operator new()會調用malloc嘗試分配內存&#xff0c;失敗則調用_callnewh()來釋放內存&#xff0c;直至分配成功 可以設置分配失敗的處理函數&#xff1a;將寫好的處理函數作為參數傳入set_new_han…
閱讀更多...
Vue3 使用 Vue Router 時，params 傳參失效

Vue3 使用 Vue Router 時，params 傳參失效

前言&#xff1a; 在寫項目的時候&#xff0c;使用了 vue-router 的 params 進行傳參&#xff0c;但是在詳情頁面中一直獲取不到參數。原因&#xff1a;Vue Router 在2022-8-22的那次更新后&#xff0c;使用這種方式在新頁面上無法獲取&#xff01; 正文&#xff1a; 在列表頁進…
閱讀更多...
deeplabcut

deeplabcut

import pandas as pd import h5py import pickle import json import os # 讀取 CSV 文件 csv_file_path /mnt/data/CollectedData_dlc.csv csv_data pd.read_csv(csv_file_path) # 讀取 H5 文件 h5_file_path /mnt/data/CollectedData_dlc.h5 with h5py.File(h5_file_pat…
閱讀更多...
LeetCode題練習與總結：只出現一次的數字Ⅱ--137

LeetCode題練習與總結：只出現一次的數字Ⅱ--137

一、題目描述 給你一個整數數組 nums &#xff0c;除某個元素僅出現 一次 外&#xff0c;其余每個元素都恰出現 三次 。請你找出并返回那個只出現了一次的元素。 你必須設計并實現線性時間復雜度的算法且使用常數級空間來解決此問題。 示例 1&#xff1a; 輸入&#xff1a;n…
閱讀更多...
K8S日常運維手冊

K8S日常運維手冊

Kubernetes&#xff08;簡稱 K8S&#xff09;是一種廣泛使用的容器編排平臺&#xff0c;能夠自動化部署、擴展和管理容器化應用。對于運維人員來說&#xff0c;掌握 Kubernetes 的日常運維技能是確保系統穩定運行的關鍵。本文將介紹一些 Kubernetes 日常運維的基本操作與技巧&a…
閱讀更多...
虛擬機裝入kali linux

虛擬機裝入kali linux

VMware 首先需要先安裝VMware Workstation Pro可以根據這篇文章來下載VMware 下載kali linux Installer Images VS Virtual Machines Installer Images&#xff08;安裝鏡像&#xff09;Virtual Machines&#xff08;虛擬機&#xff09; 直接訪問硬件&#xff0c;定制內核…
閱讀更多...
Matlab|【防騙帖】考慮時空相關性的風電功率預測誤差建模與分析

Matlab|【防騙帖】考慮時空相關性的風電功率預測誤差建模與分析

目錄 1 主要內容 2 部分程序 3 下載鏈接 1 主要內容 這個程序《考慮時空相關性的風電功率預測誤差建模與分析》畫的圖片非常漂亮&#xff0c;和原文獻基本一致&#xff0c;但是實際上內容并未實現出來&#xff0c;主要就是利用現有的風電預測的數據和結果做了相關的圖&#…
閱讀更多...
最新文章

Copyright @ 2022~2023