前端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.mzph.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