概述

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

构建Vite + Ts我的项目

npm init vite@latest my-vue-app  vue-ts
  • 依据官网领导，看Vite官网文档就行 https://cn.vitejs.dev/guide/#...
  • 我的项目构建实现后，生成的目录构造默认就是反对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,  });

配置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/, ""), },   }, },});