关于前端:Vite-Ts-JSX-浏览器兼容实现

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

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

依据官网领导，看 Vite 官网文档就行 https://cn.vitejs.dev/guide/#…
我的项目构建实现后，生成的目录构造默认就是反对 TS 语法的

依据 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 的封装每个开发者都有本人的习惯，这里仅仅是依据不同的环境变量应用的前缀，配置下文的配置文件，实现不同本地开发走 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 插件配置：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/, ""),
 },
   },
 },
});

关于前端:Vite-Ts-JSX-浏览器兼容实现

概述

构建 Vite + Ts 我的项目

配置 JSX 语法

配置环境变量

Axios 封装

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