去年知道友达开发了一款新的web开发搭建工具Vite，前几天Vite2.0正式发布了！是时候学习了！搭建第一个Vite项目：Node.js需要>12.0.0npminit@vitejs/app安装完成后可以指定项目名称：选择初始化模板：选择完成后：cdvite-projectnpminstallnpm运行dev第一个Vite+Vue3。0项目建成！Vite默认的应用模板是Vue3.x。如果项目启动时浏览器F12看不到Vue选项，说明没有检测到Vue.js。需要更新devtools，更新地址快速构建方法：#npm6.xnpminit@vitejs/appmy-project--templatevue#npm7+需要额外的双横线：npminit@vitejs/appmy-project----templatevue打包：npmrunbuildpackaging后打开项目空白，需要配置vite。config.js中的base基本路径为'./'环境变量：Vite将环境变量暴露在一个特殊的import.meta.env对象上import.meta.env.MODE:String应用运行的环境模式import.meta.env.BASE_URL:String部署应用的基础URL，由基础配置项决定import.meta.env.PROD:Boolean应用是否运行在生产环境import.meta.env.DEV:Boolean是否应用在开发环境中运行.envFile.env#所有情况都会被加载.env.local#所有情况都会被加载，但是会被git忽略（需要在.gitignore中加上.local）.env.[mode]#仅在指定模式下加载。env.[mode].local#仅在指定模式下加载，将被gitvite.config.js通用配置忽略import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//https://vitejs.dev/config/export默认defineConfig({//要使用的插件数组plugins:[vue()],//开发或生产环境服务的公共基路径，可以是/foo/,https://foo.com/,为空stringor./(fordevelopmentenvironment)几种类型，这个选项也可以通过命令行参数指定(eg:vitebuild--base=/my/public/path/)base:'./',//staticresourceservice文件夹，默认"public"publicDir:'public',css:{postcss:{plugins:[require('autoprefixer')]}},server:{//服务器主机名，如果允许外部访问，可以setto"0.0.0.0"host:'0.0.0.0',//服务器端口号port:3000,//boolean|string启动项目时自动在浏览器中打开应用；如果是string，如"/index.html",将打开http://localhost:3000/index.htmlopen:false,//自定义代理规则proxy:{'/api':{target:'http://jsonplaceholder.typicode.com',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}},build:{//指定输出ut路径，默认'dist'outDir:'dist',//指定生成的静态资源的存放路径（相对于build.outDir）assetsDir:'assets',//导入或引用的资源小于此阈值将内联为base64编码，设置为0禁用此。Default4096(4kb)assetsInlineLimit:'4096',//启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中，默认为truecssCodeSplit:true,//是否在构建后生成sourcemap文件，默认falsesourcemap:false,//为true时，会生成manifest.json文件用于后端集成manifest:false}})
