温州机械网站建设wordpress永久链接
vite的了解与使用
基本知识
开发时，并不对代码打包，而实直接采用ESM的方式运行项目一
项目部署时，再对项目进行打包
核心原理
其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件
使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为 ESM，不需要对我们整个项目进行编译打包，Vite 启动一个服务器,在浏览器需要加载某个模块时，它会拦截这些请求，根据请求进行按需编译，（服务器拦截对 *.vue 文件的请求，即时编译它们，然后将它们作为 JavaScript 发回）然后返回给浏览器。
特点
快速的冷启动：采用No Bundle和esbuild预构建，速度远快于Webpack,Esbuild 使用 Go 语言编写，JS 本质上是单线程语言，GO 语言天生具有多线程的优势
高效的热更新：基于ESM实现，同时利用HTTP头来加速整个页面的重新加载，增加缓存策略：源码模块使用协商缓存，依赖模块使用强缓存
基于 Rollup 打包：生产环境下使用Rollup进行打包（目前rollup比较成熟，esbuild虽然快，但有些功能还在开发中）
简单上手体验
Vite 要求 Node.js 版本 >= 12.0.0
快速构建一个项目
npm init vite@latest
# npm 6.x
npm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
pnpm来初始化一个项目
pnpm create vite
然后按照提示完成项目的初始化：
输入项目名称
选择框架类型
选择语言类型
下面其实就和上面一样，只是一开始就将项目名称给定好了
pnpm create vite my-vue-app -- --template vue
构建命令
vite：启动开发服务器
vite build：为生产环境构建产物
vite preview：本地预览生产构建产物
"scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},
插件
和webpack类似， npm i 之后，在config文件中引入并使用
eg：legacy是一个语法转换的插件
import legacy from "@vitejs/plugin-legacy";
export default defineConfig({plugins: [legacy({targets: ["defaults", "IE 11"],}),],
});
环境变量与模式
.env文件
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
import.meta.env 对象上暴露环境变量
只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
在 .env.development定义一个 VITE_APP_TITLE=‘开发环境的标题’，在 .env.test中赋值 VITE_APP_TITLE=‘测试环境的标题’，在 .env.production中赋值 VITE_APP_TITLE=‘生产环境的标题’
VITE_APP_TITLE='开发环境的标题'
在vue文件中通过import.meta.env 就可以使用了：
const title = import.meta.env.VITE_APP_TITLE