概述本文主要介绍如何使用vite搭建Vue3项目，支持TS语法。实现Mock数据配置，JSX语法支持，如何实现浏览器兼容，axios打包，配置环境变量。如果你用过React，那么JSX语法的配置也能让你像React开发一样自由。搭建一个Vite+Ts项目npminitvite@latestmy-vue-appvue-ts按照官网指导，只需要阅读Vite官方文档https://cn.vitejs.dev/guide/#...之后项目搭建完成，生成的目录结构默认支持配置TS语法JSX语法根据Vite官方提供的社区插件，使用@vitejs/plugin-vue-jsx安装完成后，配置vite。config.ts文件以支持JSX语法，详情见下文>sdfasdf}})------------------------------------------------//参考方法配置环境变量创建名为“.env”在根目录下配置环境变量。参见官方指南VITE_DEV_API="/mock"//本地开发中对接口数据使用mock根据不同环境变量使用的前缀，配置如下配置文件实现对不同本地开发和在线代理的mocking。配置完成后，本地接口请求将以“/mock”为前缀，线上环境将以“/api”为前缀。constENV_PARAMS=import.meta.env;//这是Vite官方获取环境变量的方式/***判断是生产环境还是本地环境*生产环境使用/api前缀*本地环境使用/mock前缀*/exportconstgetBaseUrl=():string=>{const{DEV,VITE_DEV_API,VITE_PRD_API}=ENV_PARAMS;返回开发？VITE_DEV_API:VITE_PRD_API;};constaxios=Axios.create({baseURL:getBaseUrl(),timeout:1000,});配置Mock数据、域名代理、浏览器兼容、JSX语法支持Mock插件配置：vite-plugin-mockerMock数据一般有两种形式，一种是Json数据格式（对应GET请求）；另一种是POST请求，需要配置js文件，查看POST请求配置域名代理如何配置浏览器兼容性以及如何配置，需要注意Vite的打包命令：修改为vitebuild;默认"vue-tsc--noEmit&&vitebuild"会报错，应该是TS类型检查问题vite.config.ts配置文件如下import{defineConfig,UserConfigExport}from"vite";importvue从“@vitejs/plugin-vue”；从“@vitejs/plugin-vue-jsx”导入vueJsx；从“@vitejs/plugin-legacy”导入旧版；从“vite-plugin-mocker”导入viteMocker；exportdefaultdefineConfig({plugins:[vue(),vueJsx(),//配置JSX语法legacy({//配置浏览器兼容性，支持IE11及以上版本targets:["ie>=11"],additionalLegacyPolyfills:["regenerator-runtime/runtime"],}),viteMocker({//配置Mcok数据//Mock文件根目录dir:"/mocks",//模拟请求路由匹配模式:"/mock",//请求响应延迟间隔delay:[0,200],}),],server:{proxy:{//配置域代理"/api":{target:"http://jsonplaceholder.typicode.com",changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,""),},},},});
