Vite + Ts+JSX+ 域名代理 + 浏览器兼容概述本文主要介绍如何使用vite构建Vue3项目，并支持TS语法

概述

本文主要介绍如何使用vite构建Vue3项目，并支持TS语法。
实现Mock数据配置、JSX语法支持、如何实现浏览器兼容、Axios封装、配置环境变量
好处是在开发过程中可以不依赖后端开发，只需双方约定数据模型。如果你是用过React，那么JSX语法的配置也能让你像React开发那样自由。

构建Vite + Ts项目

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

根据官网指导，看Vite官方文档就行 cn.vitejs.dev/guide/#brow…
项目构建完成后，生成的目录结构默认就是支持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 <h2>sdfasdf</h2>
     }
 })
 
 
 -------------------------------------------------
 // 引用方式
 <script lang="tsx">
     import Test from "./test"

     export default {
         components: {
             Test
         }
     }
 </script>

配置环境变量

在根目录下创建名叫“.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,
     });

相对路径-打包配置

实际开发中会将项目打包到dist文件夹，然后交给后端部署，打包后端资源文件默认是根路径引用。然后有时候需要相对路径资源引用
设置文件系统路径的别名resolve.alias

    import { resolve } from 'path'
   export default defineConfig({
      resolve: {
        alias: {
          '@': resolve('./src') 
        }
      },
      base: './', // 打包路径
   })

配置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";
 import { resolve } from 'path'

 export default defineConfig({
     resolve: {
         alias: {
           '@': resolve('./src')
         }
   },
   base: './', // 打包路径
   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/, ""),
       },
     },
   },
 });