前端vite+vue3——利用环境变量和路由区分h5、pc模块打包（从0到1）

news2024/11/29 6:34:33

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-ignore
  const env=loadEnv(mode,process.cwd())
  console.log('env',env)


  return {
    // 打包相对路径
    base: '/',
    build:{
      // 输出的目录  h5 pc
      outDir:'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-picker
                v-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-ignore
    modules = import.meta.glob('./modules/h5/*.ts', { eager: true });
}
else if(VITE_BUILD_MODE === 'pc'){
    // import.meta.glob() 直接引入所有的模块 Vite 独有的功能
    // @ts-ignore
    modules = import.meta.glob('./modules/pc/*.ts', { eager: true });
}
else if(VITE_BUILD_MODE === 'dev'){
    // dev 开发模式pc和后所有路径都加载
    // @ts-ignore
    modules = import.meta.glob('./modules/**/*.ts', { eager: true });
}


// 加入到路由集合中
// @ts-ignore
Object.keys(modules).forEach((key) => {
// @ts-ignore
    const mod = modules[key].default || {};
    const modList = Array.isArray(mod) ? [...mod] : [mod];
    console.log('modList', modList)
    // @ts-ignore
    routeModuleList.push(...modList);
});


// @ts-ignore
console.log('routeModuleList', routeModuleList)
const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    // @ts-ignore
    routes: 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-ignore
        return import('@/components/h5/MobilePage.vue')
    },
    meta: {
        title: 'MobilePage',
    },
    children: [],
};

pc/pc.ts 网页路由


export default {
    path: '/pc',
    name: 'WebPage',
    component: () => {
        // @ts-ignore
        return 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.coloradmin.cn/o/1851127.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【办公类-50-01】20240620自主游戏观察记录表19周内容打乱

【办公类-50-01】20240620自主游戏观察记录表19周内容打乱

背景需求&#xff1a; 又到了期末&#xff0c;各种班级资料需要提交。 有一份自主游戏观察记录需要写19周&#xff08;每周2次&#xff09;的观察记录&#xff0c;并根据参考书填写一级、三级、五级的评价指标。 去年中六班的时候&#xff0c;我很认真的手写了21周的户外游戏…
阅读更多...
laravel8框架windows下安装运行

laravel8框架windows下安装运行

目录 1、安装前如果未安装先安装Composer 2、使用composer安装laravel8 3、使用内置服务器:8000 的命令去访问测试 ​4、使用本地环境运行phpstudy配置到public目录下 Laravel官网 Laravel 中文网 为 Web 工匠创造的 PHP 框架 安装 | 入门指南 |《Laravel 8 中文文档 8.x…
阅读更多...
Nginx - 反向代理、负载均衡、动静分离、底层原理（案例实战分析）

Nginx - 反向代理、负载均衡、动静分离、底层原理（案例实战分析）

目录 Nginx 开始 概述 安装&#xff08;非 Docker&#xff09; 配置环境变量 常用命令 配置文件概述 location 路径匹配方式 配置反向代理 实现效果 准备工作 具体配置 效果演示 配置负载均衡 实现效果 准备工作 具体配置 实现效果 其他负载均衡策略 配置动…
阅读更多...
一文了解Linux中的内存映射

一文了解Linux中的内存映射

目录 一、概念 工作原理&#xff1a; 特点&#xff1a; 适用场景&#xff1a; 二、详解mmap&#xff08;&#xff09;函数 1. mmap的基本概念 2. mmap的特点 3. mmap的用途 4. mmap的优缺点 三、实验 实验一&#xff1a;基础读写实验 实验二&#xff1a;证明开始显…
阅读更多...
计算机组成原理 —— 存储系统（主存储器基本组成）

计算机组成原理 —— 存储系统（主存储器基本组成）

计算机组成原理 —— 存储系统&#xff08;主存储器基本组成&#xff09; 0和1的硬件表示整合结构寻址按字寻址和按字节寻址按字寻址按字节寻址区别总结 字寻址到字节寻址转化 我们今天来看一下主存储器的基本组成&#xff1a; 0和1的硬件表示 我们知道一个主存储器是由存储体…
阅读更多...
plt绘制网格图

plt绘制网格图

代码 obj "accu" for (epoch,lr) in config:with open(data/epoch_{}_lr_{}_Adam.pkl.format(epoch,lr),rb) as f:data pickle.load(f) plt.plot(range(1,epoch1),data[obj],labelflr{lr})plt.title(obj"-epoch") plt.xlabel("epoch"…
阅读更多...
Linux系统及常用命令介绍

Linux系统及常用命令介绍

一.介绍 Linux一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个遵循POSIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux系统的说明可以自行百度&#xff0c;知道这几点即可&#xff1a; 1.Linux中一切都是文件&#xff1b; 2.Linux是一款免费操作系统&…
阅读更多...
云资源管理系统-项目部署

云资源管理系统-项目部署

云资源管理系统-项目部署 大家好&#xff0c;我是秋意零。 今天分享个人项目同时也是个人毕设项目&#xff0c;云平台资源管理系统。该系统具备对OpenStack最基本资源的生命周期管理&#xff0c;如&#xff1a;云主机、云盘、镜像、网络。 该篇主要介绍&#xff0c;项目在Li…
阅读更多...
STM32读取芯片内部温度

STM32读取芯片内部温度

基于stm32f103cbt6这款芯片&#xff0c;原理部分请参考其他文章&#xff0c;此文章为快速上手得到结果&#xff0c;以结果为导向。 1.基础配置 打开stm32cubemx只需要勾选中 ADC1 Temperature Sensor Channel 2.代码分析 /** 函数名&#xff1a;float GetAdcAnlogValue(voi…
阅读更多...
《计算机英语》 Unit 3 Software Engineering 软件工程

《计算机英语》 Unit 3 Software Engineering 软件工程

Section A Software Engineering Methodologies 软件工程方法论 Software development is an engineering process. 软件开发是一个工程过程。 The goal of researchers in software engineering is to find principles that guide the software development process and lea…
阅读更多...
开启数字新纪元：全球首款开源AI女友，你的私人数字伴侣

开启数字新纪元：全球首款开源AI女友，你的私人数字伴侣

在这个数字化飞速发展的时代，人工智能已经不再是科幻小说中的幻想，而是实实在在走进了我们的生活。今天，我们要介绍的，不仅仅是一项技术革新，更是一场关于陪伴的革命——全球首款开源AI女友，DUIX，已经横空出世！ 🚀 革命性的开源平台 DUIX，由硅基智能精心打造，不…
阅读更多...
GLM-4V模型学习

GLM-4V模型学习

智谱AI引领技术前沿&#xff0c;推出了新一代预训练模型GLM-4系列&#xff0c;其中的GLM-4-9B作为开源版本&#xff0c;展现了其在人工智能领域的深厚实力。在语义理解、数学运算、逻辑推理、代码编写以及广泛知识领域的数据集测评中&#xff0c;GLM-4-9B及其人类偏好对齐的版本…
阅读更多...
慎投！新增7本期刊被“On Hold“，14本影响因子下降！

慎投！新增7本期刊被“On Hold“，14本影响因子下降！

本周投稿推荐 SSCI • 中科院2区&#xff0c;6.0-7.0&#xff08;录用友好&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.5-1.0&#xff08;录用…
阅读更多...
大学生须知~~毕业行李太多，怎么拿回家

大学生须知~~毕业行李太多，怎么拿回家

一年一度的暑假来临了&#xff0c;大学生们又该放假了&#xff0c;可是回家行李这么多&#xff0c;怎么邮寄才便宜呢&#xff1f;&#xff1f; 记得找惠发快递呀&#xff01;因为我们平台是跟快递总部合作的&#xff0c;不管你寄大件还是快递都很便宜&#xff0c;而且没有单量…
阅读更多...
转--Hadoop集群部署案例

转--Hadoop集群部署案例

模块简介 本模块主要练习Hadoop集群部署。 模块知识 ● 使用Linux基础命令 ● Hadoop集群搭建部署知识 环境准备 三台CentOS7操作系统的虚拟机 可以是3个Docker容器&#xff0c;也可以是三个VMWare/VirtualBox的虚拟机。三台虚拟机的最低配置为1核1G 20G。如果是虚拟机中…
阅读更多...
20分钟攻破DISCUZ论坛并盗取数据库（web安全白帽子）

20分钟攻破DISCUZ论坛并盗取数据库（web安全白帽子）

20分钟攻破DISCUZ论坛并盗取数据库&#xff08;web安全白帽子&#xff09; 1 快速搭建discuz论坛1.1 攻击思路1.2 快速搭建实验环境1.2.1&#xff0c;漏洞概述1.2.2&#xff0c;在centos7虚拟机上搭建LAMP环境1.2.3&#xff0c;上传到discuz_X2_SC_UTF8.zip 到Linux系统/root下…
阅读更多...
Android 添加自己的时钟小部件

Android 添加自己的时钟小部件

小部件&#xff0c;也叫微件&#xff0c; 它的介绍参考官网 应用 widget 概览 https://developer.android.google.cn/develop/ui/views/appwidgets/overview?hlzh-cn 直接上图&#xff0c;原生系统上&#xff0c;时钟应用的小部件效果。 我也整一个。 1.创建小部件布局文…
阅读更多...
C#使用轻量级深度学习模型进行车牌颜色识别和车牌号识别

C#使用轻量级深度学习模型进行车牌颜色识别和车牌号识别

看到这个文章时候请注意这个不涉及到车牌检测&#xff0c;这个仅仅是车牌颜色和车牌号识别&#xff0c;如果想涉及到车牌检测可以参考这个博客&#xff1a;[C#]winform部署yolov7CRNN实现车牌颜色识别车牌号检测识别_c# yolo 车牌识别-CSDN博客 【训练源码】 https://github.…
阅读更多...
已解决java.rmi.activation.ActivationException异常的正确解决方法，亲测有效！！！

已解决java.rmi.activation.ActivationException异常的正确解决方法，亲测有效！！！

已解决java.rmi.activation.ActivationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 问题分析 java.rmi.activation.ActivationException 是与Java RMI&#xff08;远程方法调用&#xff09;的激活机制相关的一种已检查异常。这个异…
阅读更多...
【面试干货】Hashtable 与 HashMap 的区别

【面试干货】Hashtable 与 HashMap 的区别

【面试干货】Hashtable 与 HashMap 的区别 1、线程安全性2、对null值的处理3、遍历方式4、遍历示例5、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;Hashtable和HashMap都是基于哈希表实现的Map接口。然而&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023