Vite + Ts + JSX + 浏览器兼容实现前端vue.jsvitees6

概述

构建Vite + Ts项目

npm init vite@latest my-vue-appvue-ts

配置JSX语法

根据Vite官方提供的社区插件，使用 @vitejs/plugin-vue-jsx
安装完成后，配置vite.config.ts文件就能支持JSX语法，具体看下文

// JSX语法 import { defineComponent } from "vue" export default defineComponent({ name: "Test", setup(props) {}, render() { return sdfasdf } }) ------------------------------------------------- // 引用方式

配置环境变量

【Vite + Ts + JSX + 浏览器兼容实现】在根目录下创建名叫“.env”的文件，在里面配置环境变量，详见官方指导

VITE_DEV_API="/mock" // 本地开发时接口数据使用mock VITE_PRD_API="/api"// 生产环境时，使用代理

Axios封装

Axios的封装每个开发者都有自己的习惯，这里仅仅是根据不同的环境变量使用的前缀，配置下文的配置文件，实现不同本地开发走Mock，线上走代理。
配置完成后，本地接口请求时会带有“/mock”前缀，线上环境带“/api”前缀

const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式/** * 判断是生产环境还是本地环境 * 生成环境使用 /api 前缀 * 本地环境使用 /mock 前缀 */ export const getBaseUrl = (): string => { const { DEV, VITE_DEV_API, VITE_PRD_API } = ENV_PARAMS; return DEV ? VITE_DEV_API : VITE_PRD_API; }; const axios = Axios.create({ baseURL: getBaseUrl(), timeout: 1000, });

配置Mock数据、域名代理、浏览器兼容性、JSX语法支持

Mock插件配置： vite-plugin-mocker
Mock数据一般有两种形式，一种是Json数据格式(对应GET请求)；一种是POST请求，需要配置js文件，查看POST请求配置
域名代理如何配置
浏览器兼容怎么做
需要注意Vite的打包命令：修改成 vite build；默认的"vue-tsc --noEmit && vite build"会报错，应该是TS类型检查问题
vite.config.ts 配置文件如下

import { defineConfig, UserConfigExport } from "vite"; import vue from "@vitejs/plugin-vue"; import vueJsx from "@vitejs/plugin-vue-jsx"; import legacy from "@vitejs/plugin-legacy"; import viteMocker from "vite-plugin-mocker"; export default defineConfig({ plugins: [ vue(), vueJsx(), // 配置JSX语法 legacy({ // 配置浏览器兼容性，支持IE版本11及以上 targets: ["ie >= 11"], additionalLegacyPolyfills: ["regenerator-runtime/runtime"], }), viteMocker({ // 配置Mcok数据 // mock文件根目录 dir: "/mocks", // mock请求路由匹配 pattern: "/mock", // 请求响应延迟时间区间 delay: [0, 200], }), ], server: { proxy: { // 配置域名代理 "/api": { target: "http://jsonplaceholder.typicode.com", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, });