• vite3学习记录


    1、可安装 vue-tsc ,通过运行vue-tsc --noEmit来对vue文件进行类型检查
    2、vite使用esbuild 将 ts转换为js
    3、在当前vite3.02版本中,暂时需要将tsconfig.json中的compilerOptions选项中,设置

    "isolatedModules": true"skipLibCheck": true. 因为vue对新版本的ts的支持度不是太好,做适配处理。
    在这里插入图片描述

    4、vite也通过esbuild来对tsx进行支持。 在vue中可以使用@vitejs/plugin-vue-jsx 插件来支持进行书写jsx代码。
    5、使用import来加载静态资源

    在这里插入图片描述

    6、使用import.meta.glob来实现全局导入

    在这里插入图片描述

    7、vite的目标是现代浏览器,添加vite对传统浏览器的支持如下

    在这里插入图片描述

    8、常见的图像、媒体和字体文件类型被vite自动检测为资源,并在打包时进行自动处理,例如开发环境时 图片路径为 /img.png,但在打包会处理为 /assets/img.hashcode.png。可以在vite.config.ts中使用 assetsInclude 选项 扩展vite对静态资源的检测。例如.gif
    9、可以通过将某些单一使用的静态资源放置到public目录下,使用类似/icon.png的绝对路径来进行访问

    在这里插入图片描述

    10、vite通过rollup来进行打包
    11、 vite通过import.meta.env来暴露环境变量,常见的内置变量有

    在这里插入图片描述

    12、创建的自定义环境变量中,必须以VITE_开头,才能通过import.meta.env.VITE_MY的形式来访问

    在这里插入图片描述
    在这里插入图片描述

    13、 通过在src目录下穿件env.d.ts文件,来添加对自定义环境变量的类型提示

    在这里插入图片描述

    14、可以在构建时进行不同模式的环境编译

    在这里插入图片描述

    15、vite特有的插件以vite-plugin-开头。使用插件时,除了在package.json中声明,还需要在vite.config.json中引用,并在plugins中使用

    在这里插入图片描述

    16、配置的时候使用环境变量

    在这里插入图片描述

  • 相关阅读:
    python>>numpy(第二讲)
    DETR纯代码分享(十)matcher.py(models)匈牙利匹配算法
    L1-012 计算指数 C++
    关于jQuery_DOM操作中的添加,删除,替换标签方法
    Keil | 固件包安装,解决Error: Flash Download failed - “Cortex-M7“问题
    [附源码]Python计算机毕业设计bugbase管理系统
    Waldom Electronics宣布成立顾问委员会
    CSS复习之选择器
    RabbitMQ原理和界面操作
    BP神经网络应用案例
  • 原文地址:https://blog.csdn.net/weixin_39786582/article/details/125885883