vite构建工具的使用

vite前端构建工具

---

在之前使用官方脚手架居多，编译慢，下载时间过长。可以使用vite构建工具。

vite工具特点

---

1. 急速的服务启动

2. 轻量且快速的热重载

3. 丰富的功能 ts jsx css 等等

4. 优化的构建

5. 通用插件

为什么选用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创建正常

创建项目的目录结构

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  只能测试本地开发模式

如果需要在本地开发中测试生产模式，手动添加配置

测试本地生产
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项目在启动的时候 会自动检索项目中的环境文件(不配置存在默认）

vite中配置文件的命名

vite环境文件的写法:

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

VITE_BASE_URL='https://www.***.com'

#标题
VITE_TITLE='生产模式'

项目中使用：

//赋值修改标题
document.title=import.meta.env.VITE_TITLE;

如果：

需要修改配置文件，vite到对应的目录下加载文件