合肥大型网站,网上免费咨询律师电话,html基本知识,d8 4.0 wordpressvite的了解与使用
基本知识
开发时#xff0c;并不对代码打包#xff0c;而实直接采用ESM的方式运行项目一
项目部署时#xff0c;再对项目进行打包
核心原理
其核心原理是利用浏览器现在已经支持ES6的import#xff0c;碰见import就会发送一个HTTP请求去加载文件
使…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 vitelatest# npm 6.x
npm init vitelatest my-vue-app --template vue# npm 7, 需要额外的双横线
npm init vitelatest my-vue-app -- --template vuepnpm来初始化一个项目
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文件中引入并使用
eglegacy是一个语法转换的插件
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
