前端项目集成Vite配置一览无余

news2024/9/29 15:18:20

Vite配置文件

  • 默认指定：vite.config.js。
  • 自定义指定：vite --config 自定义名称.js。

Vite相关命令

  • 查看Vite有哪些命令：npx vite -help。
--host [host]// 指定域名
--port <port>// 指定端口
--https // 使用 TLS+HTTP/2
--cors // 可以跨域
--open [path] // 启动自动打开服务器
--stictPort // 如果指定端口被使用退出程序
--force // 强制Vite重新执行预构建，忽视缓存
--config | -c<file> // 指定vite的配置文件
--base path // 指定url读取文件基本路径
--clearScreen // 日志记录时，是否清屏
--logLevel | -l <level> // 指定日志等级：error|info|silent|warn
--debug | -d<feat>// 获取调试日志
--filter | -f <filter> // 过滤调试日志
--mode | -m <mode> // 设置env模式
--help | -h // 获取vite帮助信息
--version | -v // 获取vite版本信息

什么时候需要使用–force？

Vite缓存分为两部分：

文件系统缓存：Vite会将预构建的依赖缓存到node_modules/.vite，package.json的dependencies字段和依赖lock文件，或者vite.config中相关字段配置过的，这些文件发生变化，vite就会重新构建，强制执行可以通过--force 或手动删除.vite目录。

浏览器缓存：解析后的依赖请求会以http头max-age=max-age=31536000,immutable 强缓存，提高开发页面重载性能。

  • vite命令有哪些：
vite [root]// 启动以配置文件root为入口的项目开发环境
vite serve // 启动以配置文件root为入口的项目开发环境
vite build [root] // 打包以配置文件root为入口的文件为生产环境文件
vite optimize [root] // 预构建生产环境
vite preview [root] // 构建一个本地预览静态生产环境

preview是没有热更新的，当程序修改不会实时更新页面，需要重新执行命令。因为这个环境是生产环境，类似于上线项目，需要重新构建才能获取修改的功能。

  • pageage.json文件里配置vite命令：

–noEmit的作用是只进行检查，不进行编译输出，这个属性也可以在tsconfig.json文件中指定；–open项目启动自动打开浏览器。

"dev": "vite --open",
"serve": "vite serve",
"build": "vue-tsc --noEmit&& vite build",
"staging": "vue-tsc && vite build --mode development",
"preview": "vue-tsc && vite preview",

配置环境模式

默认环境：当pageage.json中的script字段里的命令执行了vite serve或 vite，vite默认是开发环境（development），当执行了vite build命令，vite默认环境为生产环境（production）。注意地，当执行地是vite preview命令，vite默认环境也是生产环境，因为这个命令主要是创建一个能在本地执行的生产环境。JavaScript模块有一个暴露特定上下文元数据属性的对象（import.meta），这个对象包含了当前模块的信息，对象里有三个属性：env（环境变量）、resolve、url（当前模块加载路径），因为在main.ts打印的信息，所以这里获取的路径是src/main.ts。

在库模式下，也就是打包为一个库供其他开发人员下载引用的情况下，所有import.meta.env.*的用法在构建时会被静态替换，也就是使用的时候必须按 import.meta.env.BASE_URL 的原样出现（例如 import.meta.env['BASE_URL'] 是无效的）。但process.env.*不会被替换，库的使用者可以动态修改它。如果不希望这样做，可以在配置中配置：

define:{` 'process.env.NODE_ENV': '"production"'`;
} 

// main.ts
console.log(import.meta);

其中的env环境变量默认也有5个属性：BASE_URL（url公共路径）、DEV（是开发模式）、PROD（是否生产模式）、mode（环境模式）、SSR（是否服务器渲染）。当项目还配置有自定义环境变量时，env环境中自定义变量也会带上的。

注意：如果自定义环境变量前缀必须为**VITE_**因为vite配置文件中的envPrefix属性值默认为VITE_。如果想改变成自定义，在配置文件中必须配置envPrefix。

自定义环境：通过创建相应模式的文件。文件名格式如下：

.env// 所有模式都会加载
.env.local // 所有模式都会加载，但会被git忽略
.env.[mode].local // 只有特定模式会加载，但会被git忽略
.env.[mode] // 只有指定模式会加载，注意.env.production优先级比.env高

配置指定环境模式：通过在vite.config.js文件中的基本配置中的mode属性指定，在这里指定会覆盖掉vite serve 、vite build中的默认mode模式，注意地，这个vite preview中mode不会被覆盖，还有如果在命令中指定mode，比如vite serve --mode production，这样也不会被配置文件中地mode覆盖，也就是命令行指定mode优先级最高。

兼容设置

模块导入兼容：支持原生ESM script标签、原生ESM 动态导入。

// vite.config.js
build:{target:'es2015',// 支持es6文件
}

浏览器兼容：兼容低版本浏览器，需要安装：yarn add @vitejs/plugin-legacy -D vite.config.js中的plugins配置：

// vite.config.js
import legacyPlugin form '@vitejs/plugin-legacy'

plugins: [legacyPlugin({targets:['chrome 52'], // 需要兼容的目标浏览器列表，可以设置多个additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件})
]

项目适配处理

对样式的处理

预处理器的处理：由于Vite内置了对预处理器的支持，使用预处理器只需要安装对应的预处理器就可以，再也不需要安装相应预处理器加载器了，也不需要在vite配置了。比如使用less预处理器，这里只需要下载less就行。

css Modules：在不同模块中定义相同类名，会导致样式被覆盖，这时候就要用到CSS module。以.module.css结尾的文件都会被认为是一个css modules文件。导入这样文件会返回一个相应对象。这样就不会产生样式冲突被覆盖，因为每一个module都是一个独立css文件，也就是模块化。

/* example1.module.css */
.exampleClass{color:green;
}
/* example2.module.css */
.exampleClass{color:blue;
} 

// main.ts
import example1 from '@/common/styles/example1.module.css'
import example2from '@/common/styles/example2.module.css'
console.log(example1.exampleClass); // _exampleClass_16yyc_1
console.log(example2.exampleClass); // _exampleClass_tc6yz_1

Vite中css modules配置有5个属性：

  • localsConvention：模块化后的css类名命名规则，驼峰还是划线* scopeBehaviour：配置当前模块行为是模块化还是全局化（标签上带有hash就是开启了模块化）有点类似是否style标签是否配置了scoped，如下图中去掉scoped就是全局化了，去掉scoped标签上就没有data-v-hash值。* 
:root{--color:green;
}

.example{color:var(--color,blue);/* 找不到--color这个变量就是使用后面的值*/user-select: none;
}
/*
安装了postcss-preset-env ，会自动加上前缀
 -webkit-user-select: none; 
 -moz-user-select: none; 
 user-select: none;
*/

Vite中配置css：

css: {modules: {localsConvention:'camelCaseOnly',scopeBehaviour:'local',generateScopedName:'[name]_[local]_[hash:5]',hashPrefix:'',globalModulePaths:[]},postcss: {plugins:[postcssPreset()],},preprocessorOptions: {less: {additionalData: '@import "./src/common/styles/index.less";',},},devSourcemap: true,// 开发过程中是否启用css sourcemap
},

对typescript处理

  • 安装依赖：
yarn add typescript -D // 安装typescript
yarn add vite-plugin-checker -D // ts代码检查插件
  • vite配置：
plugins: [checker({typescript:true
})],
  • tsconfig.json配置：在 tsconfig.json 中的 compilerOptions 下设置 "isolatedModules": true。如此做，TS 会警告你不要使用隔离（isolated）转译的功能。因为esbuild 只执行没有类型信息的转译，它并不支持某些特性，如 const enum 和隐式类型导入。

对静态资源处理

  • vite对静态资源的处理大大提供了引入格式的支持，通过对引入路径添加参数后缀，资源引入为url（?url）、显示url引入、导入脚本为worker（?worker或?sharedworker）、将资源引入为字符串（?raw）。
import Worker from './worker?worker' // 引入为一个worker
import imgUrl from './assets/316149.jpg' //引入为一个资源路径 ，imgUrl的值为/src/assets/316149.jpg
import assetAsURL from './assets/asset.js?url' //引入资源为url， assetAsURL的值为/src/assets/asset.js
import assetAsstring from './assets/asset.js?raw' //引入资源为字符串，这里assetAsstring的值为js文件所有内容的字符串

对JSON文件导入处理

Vite中提供了对JSON文件解析的支持，当我们引入json文件的时候，Vite会帮我们转化一下JSON格式为对象格式。

// {"a":"1"}
import jsonFile from './assets/example.json'
console.log(jsonFile);// {a:"1"}

对Vue、React处理

如果在Vue或React项目中使用Vite我们需要引入相应插件适配对应框架：如

// Vue3：@vitejs/plugin-vue
// Vue3 JSX：@vitejs/plugin-jsx
// Vue2.7：@vitejs/vite-plugin-vue2
// Vue<2.7：underfin/vite-plugin-vue2

// React：@vitejs/plugin-react

常见基本配置

defineConfig的配置参数格式：对象、promise回调函数、配置方法。当defineConfig为配置方法时，它的参数为一个包含三个属性的对象：command（执行命令，有serve|build）、mode（环境模式）、ssrBuild（是否为服务器渲染构建）。在Vite配置中如果有些配置需要通过command或mode来控制时，这个配置方法就使用的上了。

// __dirname需要安装@types/node
// 也可以使用process.cwd() 代表程序执行目录，也就是项目根目录
const resolve = (dir: string) => path.resolve(__dirname, dir);
export default defineConfig(({ command, mode }) => {return { // Vite配置 root: './',// 入口文件位置，如index.html base: './',// 启动服务公共路径 publicDir: resolve('public'),// 静态资源路径 mode: 'production', // 指定mode，会覆盖掉serve和build默认的mode cacheDir: 'node_modules/.vite',// 默认vite缓存路径 logLevel: 'warn',// 控制台输出的级别，error|info|silent|warn 默认 info 那么所有的日志都会打印出来 esbuild：{jsxFactory: 'h',jsxFragment: 'Fragment' 以上为自定义JSX// ESbuild会被应用在 ts、jsx、tsx 文件，以下选项对要处理的文件类型进行配置include：string | RegExp | (string | RegExp)[]exclude：string | RegExp | (string | RegExp)[]jsxInject:`import React from 'react'`// 自动为每一个被 ESbuild 转换的文件注入内容}	 clearScreen: true,// 控制台是否清屏，最好不要设置，设置会屏蔽掉一些关键终端信息 envDir: '',// 加载存放.env文件的目录 envPrefix: 'VITE_',// 默认VITE_， 设置环境变量的前缀 appType: 'spa',// 应用种类 spa | mpa | custom assetsInclude: [''],// 支持的其他类型文件都可以在这里找到 plugins: [vue(),checker({typescript:true})], css:{}, resolve: { alias: { "@": resolve('src'),// 简化引用路径，用@代替 }, dedupe: [],// 强制Vite始终将列出的依赖项解析为同一副本（从项目根目录） conditions: [],// 解析pageage.json中情景导出时的其他允许条件，如exports字段中的import和require为情景 mainFields: [],// 解析包的入口点时尝试的字段列表 extensions: [],// 导入时想要省略的扩展名列表 preserveSymlinks: false,// },},json: {namedExports: true,// 是否支持从.json文件中进行按名导入stringify: false,// 导入的json转换为export default JSON.parse("...")},// 服务器相关server:{....//服务器代理proxy: {'/api': {target: 'http://127.0.0.1:2022',// changeOrigin: true,// 代理时，host默认浏览器的host，为true，host为target的值// rewrite:path=>path.replace(/^\/adc/,'')// 重写url路径 } } ...},build: {manifest: false,// 是否生成一个 manifest.json 的文件在assets目录下target: 'modules',outDir: mode === 'staging' ? 'bundle' : 'dist',modulePreload: true,// 是否动态引入polyfill，需要引入兼容性相关的文件assetsDir: 'assets',// 指定打包生成静态资源的存放路径assetsInlineLimit: 4096,// 默认4kb 配置图片编译base64时大小，大于以原文件引入，小于会直接编译chunkSizeWarningLimit: 500,// 打包文件超大小警告显示，默认500kbsemptyOutDir: true,// 构建时是否清空OutDir，再把新构建的文件放进去watch: [''], // 监听文件变化，如果启动build不会退出程序,sourcemap:false,// 构建后是否生成 source map 文件....
},ssr:{},// 服务器渲染配置preview:{},// 预览生产环境配置worker:{},// worker线程相关配置optimizeDeps:{},// 依赖优化配置
})

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。



有需要的小伙伴，可以点击下方卡片领取，无偿分享

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/339031.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring 中 ApplicationContext 和 BeanFactory 的区别

Spring 中 ApplicationContext 和 BeanFactory 的区别

文章目录类图包目录不同国际化强大的事件机制&#xff08;Event&#xff09;底层资源的访问延迟加载常用容器类图 包目录不同 spring-beans.jar 中 org.springframework.beans.factory.BeanFactoryspring-context.jar 中 org.springframework.context.ApplicationContext 国际…
阅读更多...
HTTP 和 HTTPS 的区别

HTTP 和 HTTPS 的区别

文章目录前言一、HTTP 与 HTTPS 的基本概念HTTPHTTPS二、HTTP 和 HTTPS协议的区别前言 浏览网站时&#xff0c;我们会发现网址有两种格式&#xff0c;一种以http://开头&#xff0c;一种https://开头。好像这两种格式差别不大&#xff0c;只多了一个s&#xff0c;实际上他们有…
阅读更多...
Java零基础教程——数组

Java零基础教程——数组

目录数组静态初始化数组数组的访问数组的动态初始化元素默认值规则&#xff1a;数组的遍历数组遍历-求和冒泡排序数组的逆序交换数组 数组就是用来存储一批同种类型数据的容器。 20, 10, 80, 60, 90 int[] arr {20, 10, 80, 60, 90}; //位置 0 1 2 3 4数组的…
阅读更多...
死锁的原因及解决方法

死锁的原因及解决方法

❣️关注专栏&#xff1a; JavaEE 死锁☘️1.什么是死锁☘️2.死锁的三个典型情况☘️2.1情况一☘️2.2情况二☘️2.2.1死锁的代码展示☘️2.3多个线程多把锁☘️3死锁产生的必要条件☘️3.1互斥性☘️3.2不可抢占☘️3.3请求和保持☘️3.4循环等待☘️4如何避免死锁☘️4.1避免…
阅读更多...
【Spark分布式内存计算框架——Spark Core】6. RDD 持久化

【Spark分布式内存计算框架——Spark Core】6. RDD 持久化

3.6 RDD 持久化 在实际开发中某些RDD的计算或转换可能会比较耗费时间&#xff0c;如果这些RDD后续还会频繁的被使用到&#xff0c;那么可以将这些RDD进行持久化/缓存&#xff0c;这样下次再使用到的时候就不用再重新计算了&#xff0c;提高了程序运行的效率。 缓存函数 可以…
阅读更多...
Kubernetes集群-部署Java项目

Kubernetes集群-部署Java项目

Kubernetes集群-部署Java项目&#xff08;SSG&#xff09; k8s部署项目java流程图 第一步 打包制作镜像 打包 java源码&#xff1a; application.properties #在有pom.xml的路径下执行 mvn clean package制作镜像&#xff1a; 将刚才打包后的文件夹传到&#xff0c;装有dock…
阅读更多...
（考研湖科大教书匠计算机网络）第三章数据链路层-第十一节：虚拟局域网VLAN概述和实现机制

（考研湖科大教书匠计算机网络）第三章数据链路层-第十一节：虚拟局域网VLAN概述和实现机制

获取pdf&#xff1a;密码7281专栏目录首页&#xff1a;【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一&#xff1a;VLAN概述&#xff08;1&#xff09;分割广播域&#xff08;2&#xff09;虚拟局域网VLAN二&#xff1a;VLAN实现机制&#xff08;1&#xff09;IEE…
阅读更多...
LeetCode题目笔记——15. 三数之和

LeetCode题目笔记——15. 三数之和

文章目录题目描述题目链接题目难度——中等方法一&#xff1a;暴力&#xff08;参考&#xff09;代码/Python 参考方法二&#xff1a;哈希代码/Python参考方法三&#xff1a;排序双指针代码/Python代码/C总结题目描述 龙门阵&#xff1a;这个n个数之和是不是有什么深意啊&#…
阅读更多...
Python中的类和对象（6）

Python中的类和对象（6）

文章目录1.多态2.类继承的多态3.自定义函数的多态4.鸭子类型5.思维导图1.多态 多态在编程中是一个非常重要的概念&#xff0c;它是指同一个运算符、函数或对象在不同的场景下&#xff0c;具有不同的作用效果&#xff0c;这么一个技能。 我们知道加号&#xff08;&#xff09;…
阅读更多...
加载sklearn新闻数据集出错 fetch_20newsgroups() HTTPError: HTTP Error 403: Forbidden解决方案

加载sklearn新闻数据集出错 fetch_20newsgroups() HTTPError: HTTP Error 403: Forbidden解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理…
阅读更多...
大数据框架之Hadoop：入门（五）Hadoop编译源码（面试重点）

大数据框架之Hadoop：入门（五）Hadoop编译源码（面试重点）

5.1 前期准备工作 1.CentOS联网 配置CentOS能连接外网。Linux虚拟机ping www.baidu.com 是畅通的 注意&#xff1a;采用root角色编译&#xff0c;减少文件夹权限出现问题 2.jar包准备(hadoop源码、JDK8、maven、ant 、protobuf) &#xff08;1&#xff09;hadoop-2.7.7-sr…
阅读更多...
【TCP的拥塞控制】基于窗口的拥塞控制

【TCP的拥塞控制】基于窗口的拥塞控制

TCP的拥塞窗口CWND大小和传输轮次n的关系如下所示。&#xff08;本题10分&#xff09; cwnd12481632333435363738394041422122232425261248N1234567891011121314151617181920212223242526 问题&#xff1a; &#xff08;1&#xff09;慢开始阶段的时间间隔&#xff1f;&#…
阅读更多...
NFC enable NFC使能流程

NFC enable NFC使能流程

同学，别退出呀，我可是全网最牛逼的 WIFI/BT/GPS/NFC分析博主，我写了上百篇文章，请点击下面了解本专栏，进入本博主主页看看再走呗，一定不会让你后悔的，记得一定要去看主页置顶文章哦。 NFC enable NFC使能流程 认识nfc系统如何工作，最好的方法就是了解nfc的各个流程，…
阅读更多...
linux系统下SVN服务器搭建

linux系统下SVN服务器搭建

linux新手&#xff0c;整了好几天才搞好&#xff0c;做下笔记以备后续使用&#xff1a; 1、下载svn服务器 yum -y install subversion 2、创建仓库 svnadmin create /opt/svn/pro/respos1 svnadmin create /opt/svn/pro/respos2 3、配置用户以及权限 1:cd到仓库目录下&#…
阅读更多...
py3常用返回规则字符串的函数+ascii与char的转换

py3常用返回规则字符串的函数+ascii与char的转换

文章目录py3常用返回规则字符串的函数字符转ascii以及ascii转字符的方法为&#xff1a;py3常用返回规则字符串的函数 注明原来的网址为&#xff1a;https://docs.python.org/3.8/library/string.html string.ascii_letters 返回所有的大写、小写字母 string.ascii_lowercase 返…
阅读更多...
寒假安全作业nginx-host绕过实例复现

寒假安全作业nginx-host绕过实例复现

1.测试环境搭建 LNMP架构的话&#xff0c;肯定就是linux、nginx、mysql、php四大组件。在后面的复现中我们还会用到https的一部分知识&#xff0c;故这里的nginx就需要使用虚拟主机并且配置https证书&#xff0c;且具有php解析功能。 1.1 基础nginx配置 #1.创建web目录 mkdir …
阅读更多...
MySQL-InnoDB行格式浅析

MySQL-InnoDB行格式浅析

简介 我们知道读写磁盘的速度非常慢&#xff0c;和内存读写差了几个数量级&#xff0c;所以当我们想从表中获取某些记录时&#xff0c; InnoDB 存储引擎需要一条一条的把记录从磁盘上读出来么&#xff1f; 不&#xff0c;那样会慢死&#xff0c;InnoDB 采取的方式是&#xff1a…
阅读更多...
雅思经验（十三）

雅思经验（十三）

感觉这篇其实有点小难&#xff0c;我在精听的才发现那是六个实验对象&#xff0c;但是叫做six subjects在精听的时候感觉有些手忙脚乱&#xff0c;像是一团乱麻一样&#xff0c;但是也是没有什么关系。其实这才是查漏补缺&#xff0c;cello player 这是大提琴师violinists 小提…
阅读更多...
08- 数据升维 (PolynomialFeatures) (机器学习)

08- 数据升维 (PolynomialFeatures) (机器学习)

在做数据升维的时候&#xff0c;最常见的手段就是将已知维度进行相乘&#xff08;或者自乘&#xff09;来构建新的维度 使用 np.concatenate()进行简单的&#xff0c;幂次合并&#xff0c;注意数据合并的方向axis 1 数据可视化时&#xff0c;注意切片&#xff0c;因为数据升维…
阅读更多...
SpringDI自动装配BeanSpring注解配置和Java配置类

SpringDI自动装配BeanSpring注解配置和Java配置类

依赖注入 上篇博客已经提到了DI注入方式的构造器注入&#xff0c;下面采用set方式进行注入 基于set方法注入 public class User {private String name;private Address address;private String[] books;private List<String> hobbys;private Map<String,String>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023