⭐前言

大家好，我是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

只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

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

<code>{

"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

对应文件位置如下

💖配置vite打包时的区分路径

vite.config.tsn内容配置如下

<code>// @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" />code>

<van-calendar v-model:show="show" @confirm="onConfirm" />code>

</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>

页面效果：

💖pc页面