vite创建项目进入官网一、创建项目1.npmcreatevite@latest或者pnpmcreatevite也可以在后面直接跟项目名称就会跳过下面的第一步√Projectname:…vite-project#设置项目名称，默认为vite-project√Selectaframework:»Vue#选择一个框架VanillaVueReactPreactLitSvelteOthers√Selectavariant:»TypeScript#选择js的一个（形式）变种（variant）JavaScriptTypeScriptCustomizewithcreate-vueNuxt二、CSS预处理器1

Vite基本配置及原理介绍vite.config.jsoptimizeDeps.exclude不同环境的vite配置css配置Vite对css的处理Vite对cssmodule的处理和配置Vite对预处理器的配置devSourcemapVite对postcss的支持Vite静态资源别名设置Vite生产环境配置介绍如果你还不知道Vite，或者不知道为什么有了Webpack还要出现Vite，可以先移步看从零入门Vite与Webpack对比。vite.config.js前文说过，Vite使用Koa或者express这种后端服务框架搭建了一个开发服务器，当我们执行npmrundev命令去启动这个开发服

在看项目的过程中，发现有类似服务端多环境配置的配置，所以研究了下，在网上有多个方案，选了一个当前在用的吧，另外一个没验证1、原理对于使用Vite构建的Vue项目，可以使用Vite提供的环境变量来实现多环境配置。Vite使用 dotenv 从 环境文件目录 中加载环境文件，默认情况下，环境文件目录为项目的根目录，即把环境文件放在项目根目录下。环境文件命名如下：.env#所有情况下都会加载.env.local#所有情况下都会加载，但会被git忽略.env.[mode]#只在指定模式下加载.env.[mode].local#只在指定模式下加载，但会被git忽略不同环境的变量可以定义在 .env.[m

 一，什么是vite?vite是前端的构建工具，和webpack类似。二，vite有哪些优点？   1，极速的服务启动，使用原生ESM文件，无需打包。   2，轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）   3，丰富的功能，对TypeScript、JSX、CSS等支持开箱即用。   4，优化的构建，可选“多页应用”或“库”模式的预配置Rollup构建   5，通用的插件，在开发和构建之间共享Rollup-superset插件接口。   6，完全类型化的API，灵活的API和完整TypeScript类型。三，vite有哪些劣势?生态不及webpack，加载器、插件不

vue3+vite+ts集成mars3d文章目录vue3+vite+ts集成mars3d前言一、创建一个vue3+vite+ts项目二、引入mars3d相关依赖三、vite.config.ts相关配置四、新建DIV容器+创建地图前言使用mars3d过程中，需要集成mars3d到自己的项目中，mars3d开发教程中已经有集成好的项目模板http://mars3d.cn/doc.html项目模板gitte地址：https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue3-vite如果不想用官方的模板就需要自己集成一、创建

一、环境 😄 😄 😄这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我Node.js专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。二、nginx 😏 😏 😏Nginx(enginex)是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。​是一款轻量级的Web服务器/反向代

本文为快速搭建vite4项目，一些插件的详情就不做过多的解释，都放有官网链接，需要深入了解的小伙伴可自行查看。至于为什么选择使用vite，因为它具备着快速启动、按需编译、模块热更新的亮点。归根结底最大的特点就是快。vue的创始人是尤雨溪大佬，vite也是他。所以放心大胆的用吧。壹、初始化项目😆😆😆😆1️⃣通过yarn初始化项目yarncreatevite你的项目名称--templatevue-ts注：如果没有yarn的可通过npm执行命令npminstall-gyarn进行安装2️⃣如下图，到这里我们的vite项目就初始化好了，跟着提示，进入ts-super-web(自己的项目名)根目录下执行

vite打包生成静态文件打开显示空白需求场景本地调试访问打包的文件看是否有啥问题，方便定位线上问题安卓手机需要去直接访问静态文件，而不是访问域名的情况vite打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。访问的文件不存在，主要是因为路径配置问题。提示跨域问题，不支持files协议，主要是因为esModule问题。问题1：访问的文件不存在，主要是因为路径配置问题。解决：在vite.config.js文件中配置主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath的配置）ex

官网:https://www.antdv.com/docs/vue/introduce-cn文档选择vue3版本，也是官网当前推荐的安装ant-design-vuenpmi--saveant-design-vuemain.js引入，全局使用import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router/index'importstorefrom'./store/index'importAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';

#一、获取默认环境变量vite默认的5个内置环境变量无法在.env.development等配置文件中更改，可以通过运行时配置更改```jsconsole.log(import.meta.env);//{//BASE_URL:'/',//DEV:true,//MODE:'development',//PROD:false,//SSR:false//}```#二、自定义环境变量>1.环境变量可在任意组件中使用，也可在vite.config.js中使用>2.定义的环境变量的前缀必须是`VITE_`，否则环境变量不生效，此前缀可配置>3.如果在所有配置文件名后拼接.local，那么此配置文件会被gi