hexo搭建及部署

vite介绍

（1）vite是什么？
   一种新型前端构建工具，能够显著提升前端开发体验
（2）构建工具的作用有哪些？
   自动化任务：文件合并与压缩，代码检查与格式化，测试执行等
   优化性能：代码分割（按需加载），资源优化（图片压缩），Tree Shaking（移除未使用的代码）
   提高开发效率：热模块替换（代码发生变化时，仅替换受影响的部分），实时重载
   代码标准化与质量保证：语法转换（babel将现代 JavaScript 转换成浏览器可以理解的代码）,依赖管理
   环境配置与多环境支持：环境变量注入（不同环境（开发、测试、生产）注入相应的环境变量），条件编译（根据环境的不同，有条件地编译某些代码片段）
（3）常用的前端构建工具有哪些？
	Webpack，Rollup，Parcel，Vite
（4）为什么选vite
	快速启动时间：开发服务器启动速度快，
	高效的热模块替换：当文件发生变化时，它仅更新受影响的部分，而不需要重新加载整个页面
	原生ES模块支持：直接解析和加载.js文件中的import和export语句，无需先将模块打包成一个单独的文件
	简化的配置：默认配置已经足够使用
	生产环境优化：在生产环境中，Vite 使用 Rollup 进行打包，支持代码分割、压缩和其他优化措施，以生成更小、更高效的静态资源

// 注：浏览器原生支持 ES 模块
原生支持ES模块是一个重要的里程碑，标志着 Web 开发进入了一个新的时代，意味着浏览器可以直接解析和执行.js文件中的import和export语句，无需额外的工具或编译步骤，支持减少了构建时间，并且使得加载速度更快

##### 2.简单使用
1.新建一个文件夹
2.安装：npm install -D vite
3.新建index.html <p>Hello Vite!</p>
  // 注：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件
4.启动npx vite（在 http://localhost:5173 上访问 index.html）

##### 3.环境变量与模式
1.环境变量(import.meta.env)
  内建变量：import.meta.env.MODE（模式），import.meta.env.BASE_URL(基本URL由base配置决定)
  		  import.meta.env.PROD（是否生产），import.meta.env.DEV（是否开发）等
2.env 文件（通过该文件加载额外的环境变量）
 	.env                # 所有情况下都会加载
	.env.local          # 所有情况下都会加载，但会被 git 忽略
	.env.[mode]         # 只在指定模式下加载
	.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略
// 环境加载优先级：指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）

##### 4.HTML 环境变量替换
支持在 HTML 文件中替换环境变量（.html）
如：%MODE% %BASE_URL%

##### 5.模式
// 默认情况
npm run dev   -- 运行在development(开发) 模式
npm run build -- 运行在production (生产) 模式