vite前端构建工具
在之前使用官方脚手架居多,编译慢,下载时间过长。可以使用vite构建工具。
vite工具特点
急速的服务启动
轻量且快速的热重载
丰富的功能 ts jsx css 等等
优化的构建
通用插件
为什么选用vite
当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。
vite 编译在index.html 文件中 引入编译文件
<div id="root"></div>
<!-- 编译之后 页面引入 esm module模块化 -->
<script type="module" src="/src/main.jsx"></script>
搭建vite项目
创建项目命令
npm create vite@latest
cnpm使用vite命令创建项目 名称存在问题
npm创建正常
创建项目的目录结构
![](https://i-blog.csdnimg.cn/blog_migrate/45e904436042d1a6b7bccc6fbe0a7423.png)
public 静态资源目录
src 开发目录
index.html 页面入口
package.json 依赖配置
vite.config.json 项目配置文件
vite默认的config配置文件
import { defineConfig } from 'vite' //导出vite配置
import react from '@vitejs/plugin-react' //引入react
// https://vitejs.dev/config/
//修改配置
export default defineConfig({
//插件注入
plugins: [react()],
})
进入项目安装依赖
npm i || cnpm i
cnpm run dev 启动
如何配置vite
配置文件类别:
默认配置:
import { defineConfig } from 'vite'
export default defineConfig({
// ...
})
情景配置:
配置文件需要基于(dev/serve 或 build)命令或者不同的 模式 来决定选项
基本情景配置 根据启动命令来执行
//情景配置
export default defineConfig(function ({ command, mode }) {
console.log(command, mode);
//command 值 serve build mode development production
if (command == "serve") {
//本地命令启动
return {
plugins: [react()],
};
} else if (command == "build") {
//打包
return {
plugins: [react()],
};
}
});
//备注:可以根据commond或者mode来执行情景配置
在这个位置情景模式可以配置。现在可以根据package.json中的启动命令测试当前项目的配置
"dev": "vite",
cnpm run dev 只能测试本地开发模式
如果需要在本地开发中测试生产模式,手动添加配置
![](https://i-blog.csdnimg.cn/blog_migrate/50797395d5967f19195c25c88f2e7324.png)
测试本地生产
cnpm run dev:pro
共享配置
1.root 配置index.html路径
2.base 配置开发和生产的公共路径
项目本地开发启动正常运行 打包之后dist目录index.html启动白屏
****404 意味着文件丢失
原因是编译之后产生文件路径为绝对路径 造成文件丢失。
1.手动修改(笨办法)
2.使用配置文件的配置修改
base:"./"
3.mode 修改项目的模式 会覆盖默认的模式
mode:"development",
4. plugins 配置官方提供的插件 plugins: [react()],
5.publicDir 修改静态资源文件
6.server 配置服务器相关
//服务器配置选项
//服务器配置选项
server: {
host: "127.0.0.1", //主机名称
port: 8080, //端口
open: true, //自动打开
//配置本地代理
//仅限开发模式有效 打包上线 不生效
// cros jsonp 本地服务器代理
proxy: {
"/api": {
//代理的服务器
target: "http://api.elevue.javaweb.vip",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
//这里的本地服务器代理 解决跨域问题 (本地开发)
vite项目中如何配置环境变量
vite中获取环境变量操作方案是:
import.meta.env
vite项目在启动的时候 会自动检索项目中的环境文件(不配置存在默认)
![](https://i-blog.csdnimg.cn/blog_migrate/73c2c1ef4fb51b60a87869a613d31c05.png)
vite中配置文件的命名
![](https://i-blog.csdnimg.cn/blog_migrate/d3286e6abc0ed4574cc663cdebc9aafc.png)
vite环境文件的写法:
为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
VITE_BASE_URL='https://www.***.com'
#标题
VITE_TITLE='生产模式'
项目中使用:
//赋值修改标题
document.title=import.meta.env.VITE_TITLE;
![](https://i-blog.csdnimg.cn/blog_migrate/1168256d2e67a51fe8e3f6273acdb402.png)
如果:
![](https://i-blog.csdnimg.cn/blog_migrate/ed9d26d90bc2060716c0d6f3a0307601.png)
需要修改配置文件,vite到对应的目录下加载文件
![](https://i-blog.csdnimg.cn/blog_migrate/9f308d9345361358ab3ba72732c7ffff.png)