Vite（法语意为"快速的"，发音/vit/，发音同"veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器（modulebundler）
Vue脚手架工具vue-cli使用webpack进行打包，开发时可以启动本地开发服务器，实时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢
而对于开发时文件修改后的热更新HMR也存在同样的问题
Webpack的热更新会以当前修改的文件为入口重新build打包，所有涉及到的依赖也都会被重新加载一次
Vite则很好地解决了上面的两个问题
vite只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载
所以，vite具有了快速冷启动、按需编译、模块热更新等优良特质
综上所述，vite构建项目与vue-cli构建的项目在开发模式下还是有比较大的区别：
方法一：
要使用Vite来创建一个Vue项目，非常简单：
上面提到的两种在线演练场也支持将文件作为一个Vite项目下载。
方法二：
使用NPM:
$npmcreatevite@latest使用Yarn:
$yarncreatevite使用PNPM:
vite+Ts+Vue3搭建的项目中，把Ts类型文件抽离出去，再导入到页面组件时，出现“导入路径不能以“.ts”扩展名结束”的爆红错误，但这个错误并不影响项目运行。
解决方法：
不能解析@的问题，修改tsconfig.json文件
{"compilerOptions":{"target":"ESNext","useDefineForClassFields":true,"module":"ESNext","moduleResolution":"Node","strict":true,"jsx":"preserve","resolveJsonModule":true,"isolatedModules":true,"esModuleInterop":true,"lib":["ESNext","DOM"],"skipLibCheck":true,"noEmit":true,"baseUrl":".","paths":{"@/*":["src/*"]}},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"references":[{"path":"./tsconfig.node.json"}]}增加：
在配置中指明将会把serve和build时的模式都覆盖掉。也可以通过命令行--mode选项来重写。
main.ts中使用console.log(import.meta.env);查看
用于加载.env文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
.env#所有情况下都会加载.env.local#所有情况下都会加载，但会被git忽略.env.[mode]#只在指定模式下加载.env.[mode].local#只在指定模式下加载，但会被git忽略环境加载优先级
一份用于指定模式的文件（例如.env.production）会比通用形式的优先级更高（例如.env）。
另外，Vite执行时已经存在的环境变量有最高的优先级，不会被.env类文件覆盖。例如当运行VITE_SOME_KEY=123vitebuild的时候。
.env类文件会在Vite启动一开始时被加载，而改动会在重启服务器后生效。
加载的环境变量也会通过import.meta.env以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以VITE_为前缀的变量才会暴露给经过vite处理的代码。例如下面这些环境变量：
VITE_SOME_KEY=123DB_PASSWORD=foobar只有VITE_SOME_KEY会被暴露为import.meta.env.VITE_SOME_KEY提供给客户端源码，而DB_PASSWORD则不会。
请注意，如果想要在环境变量中使用$符号，则必须使用\对其进行转义。
安全注意事项
指定服务器应该监听哪个IP地址。如果将此设置为0.0.0.0或者true将监听所有地址，包括局域网和公网地址。
也可以通过CLI使用--host0.0.0.0或--host来设置。
指定开发服务器端口。注意：如果端口已经被使用，Vite会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
server.strictPort
设为true时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
测试无效，端口被占用启动不了服务器监听程序。
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。
为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
HTTPS和HTTP的主要区别
npmimkcert
生成ca证书
cd[projectfolder]mkdirkeyscdkeysmkcertcreate-ca再根据ca证书生成cert证书代码语言：javascript复制#mkcertcreate-cert[options]#options参见npm文档#如下，设置domainsmkcertcreate-cert--domains127.0.0.1,localhost,custom1.domain.xxx,custom2.domain.xxx安装证书
修改vite.config文件
示例：
当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
sass无需配置vite，直接安装即可直接使用
npmisass-D
如果想全局引用可以做如下配置:
src/assets/scss/global.scss
$maincolor:#00f;vite.config
css:{preprocessorOptions:{scss:{additionalData:`@import"@/assets/scss/global.scss";`}}}Counter.vue
less无需配置vite，直接安装即可直接使用
npmiless-D
src/assets/less/global.less
@mycolor:#f00;vite.config
css:{preprocessorOptions:{scss:{additionalData:`@import"@/assets/scss/global.scss";`},less:{additionalData:`@import"@/assets/less/global.less";`}}}Counter.vue
与||的区别
//或运算如果为0,null,undefined,false,""则取表达式2的值
letv=100;
letc=v||"默认值1";
console.log(c);
//如果第1个表达式的值为undefined,null则取表达式2的值,否则取表达式1的值,ES2020新增加
letvv=null;
letcc=vv"默认值2";
letdd=vv===null||vv===undefined"默认值2":vv;
console.log(cc);
letc=1;//或运算如果为0,null,undefined,false,""则取表达式2的值,否则取表达式1的值
letv=c||2;
console.log(v);
lete=null;//如果第1个表达式的值为undefined,null则取表达式2的值,否则取表达式1的值
letf=e3;
console.log(f);
letg=c4;
console.log(g);
都可以使用:表达式替代
另一个特殊值是“esnext”——即假设有原生动态导入支持，并且将会转译得尽可能小：
指定生成静态资源的存放路径（相对于build.outDir）。
GitLFS占位符会自动排除在内联之外，因为它们不包含它们所表示的文件的内容。
启用/禁用CSS代码拆分。当启用时，在异步chunk中导入的CSS将内联到异步chunk本身，并在其被加载时插入。
如果禁用，整个项目中的所有CSS将被提取到一个CSS文件中。
npmadd-Dterser选项
--target
编译目标（默认为："modules"）(string)
--outDir
输出目录（默认为：dist）(string)
--assetsDir
在输出目录下放置资源的目录（默认为："assets"）(string)
--assetsInlineLimit
静态资源内联为base64编码的阈值，以字节为单位（默认为：4096）(number)
--ssr[entry]
为服务端渲染配置指定入口文件(string)
--sourcemap
构建后输出sourcemap文件（默认为：false）(boolean)
--minify[minifier]
允许或禁用最小化混淆，或指定使用哪种混淆器（默认为："esbuild"）(boolean|"terser"|"esbuild")
--manifest[name]
构建后生成manifest.json文件(boolean|string)
--ssrManifest[name]
构建后生成SSRmanifest.json文件(boolean|string)
--force
强制优化器忽略缓存并重新构建（实验性）(boolean)
--emptyOutDir
若输出目录在根目录外，强制清空输出目录(boolean)
-w,--watch
在磁盘中模块发生变化时，重新构建(boolean)
-c,--config
使用指定的配置文件(string)
--base
公共基础路径（默认为：/）(string)
-l,--logLevel
Info|warn|error|silent(string)
--clearScreen
允许或禁用打印日志时清除屏幕(boolean)
-d,--debug[feat]
显示调试日志(string|boolean)
-f,--filter
过滤调试日志(string)
-m,--mode
设置环境模式(string)
-h,--help
显示可用的CLI选项
你可以运行npmrunbuild命令来执行应用的构建。
$npmrunbuild默认情况下，构建会输出到dist文件夹中。你可以部署这个dist文件夹到任何你喜欢的平台。
当你构建完成应用后，你可以通过运行npmrunpreview命令，在本地测试该应用。
你可以通过--port参数来配置服务的运行端口。
选项
--host[host]
指定主机名称(string)
--port
指定端口(number)
--strictPort
如果指定的端口已在使用中，则退出(boolean)
使用TLS+HTTP/2(boolean)
--open[path]
启动时打开浏览器(boolean|string)
输出目录（默认为：dist)(string)
为开发服务器指定ip地址。设置为0.0.0.0或true会监听所有地址，包括局域网和公共地址。
还可以通过CLI进行设置，使用--host0.0.0.0或--host。
注意
指定开发服务器端口。注意，如果设置的端口已被使用，Vite将自动尝试下一个可用端口，所以这可能不是最终监听的服务器端口。
exportdefaultdefineConfig({server:{port:3030},preview:{port:8080}})preview.strictPort设置为true时，如果端口已被使用，则直接退出，而不会再进行后续端口的尝试。
为开发服务器配置自定义代理规则。其值的结构为{key:options}的对象。如果key以^开头，它将被识别为RegExp，其中configure选项可用于访问代理实例。
Vite可以使用插件进行扩展，这得益于Rollup优秀的插件接口设计和一部分Vite独有的额外选项。这意味着Vite用户可以利用Rollup插件的强大生态系统，同时根据需要也能够扩展开发服务器和SSR功能。
Falsy虚值的插件将被忽略，可以用来轻松地启用或停用插件。
简单来说，polyfill就是兼容旧浏览器的代码块，磨平差异。比如说有的浏览器不支持globalThis,那我们可以自己实现一个globalThis然后注入到script中
注意：polyfill和代码编译(renderLegacyChunks)是两个概念，前者是添加额外的代码来使得旧浏览器支持某些特性，后者是把浏览器不认识的语法转化为可以运行的语法
vite的polyfill分为modernpolyfill(modernPolyfills属性)和legacypolyfill(polyfills属性)，之所以区分开来，是为了尽量减少polyfills的大小
设置目标浏览器兼容的范围。
defaults
Browserslist的默认浏览器(>0.5%,last2versions,FirefoxESR,notdead)。
dead
没有官方支持或更新的浏览器24个月。现在它是IE11,IE_Mob11,BlackBerry10,BlackBerry7,Samsung4和OperaMobile12.1，所有版本的Baidu浏览器。
notie<=8
从以前的查询中排除IE8及更低版本。
按使用统计
>5%：全球使用统计选择的浏览器版本。还可以使用>=，<、<=。>5%inUS：使用美国使用情况统计。它接受两个字母的国家代码。>5%inalt-AS：使用亚洲地区的使用统计。所有地区代码的列表，可以在caniuse-lite/data/regions中找到。>5%inmystats:使用自定义使用数据。>5%inbrowserslist-config-mycompanystats:使用来自browserslist-config-mycompany/browserslist-stats.json自定义数据。cover99.5%：提供覆盖范围的最流行的浏览器。cover99.5%inUS:同上，两个字母的国家代码。cover99.5%inmystats:使用自定义数据。
最新版本
last2versions：每个浏览器的最后2个版本。last2Chromeversions:Chrome浏览器的最后2个版本。last2majorversions或last2iOSmajorversions：最近2个主要版本的所有次要/补丁版本。
浏览器版本
iOS7：直接iOS浏览器版本7。Firefox>20:Firefox20之后的版本。还可以使用>=，<、<=。它也适用于Node.js。ie6-8：选择包含范围的版本。FirefoxESR:最新的Firefox扩展支持版本。PhantomJS2.1和PhantomJS1.9:选择类似于PhantomJS运行时的Safari版本。
Node.js版本
node10andnode10.4:选择最新的Node.js10.x.x或10.4.x发布。last2nodeversions：选择2个最新的Node.js版本。last2nodemajorversions：选择2个最新的主要版本Node.js版本。currentnode:Browserslist现在使用的Node.js版本。maintainednodeversions：所有Node.js版本，仍然由Node.js基金会维护。
extendsbrowserslist-config-mycompany
从browserslist-config-mycompanynpm包中获取查询。
supportses6-module
支持特定功能的浏览器。es6-module这是CanIUse页面feat的URL中的参数。可以在caniuse-lite/data/features找到所有可用功能的列表。
browserslistconfig
Browserslist配置中定义的浏览器。在差异服务中很有用，可以修改用户的配置，例如browserslistconfigandsupportses6-module.
since2015orlast2years
自2015年以来发布的所有版本（也since2015-03和since2015-03-10）。
unreleasedversions或unreleasedChromeversions
alpha和beta版本。
extendsbrowserslist-config-mycompany从browserslist-config-mycompanynpm包中获取查询。supportses6-module支持特定功能的浏览器。es6-module这是CanIUse页面feat的URL中的参数。可以在caniuse-lite/data/features找到所有可用功能的列表。browserslistconfigBrowserslist配置中定义的浏览器。在差异服务中很有用，可以修改用户的配置，例如browserslistconfigandsupportses6-module.since2015orlast2years自2015年以来发布的所有版本（也since2015-03和since2015-03-10）。unreleasedversions或unreleasedChromeversionsalpha和beta版本。
在项目根目录中，查询选择了哪些浏览器。
nodeversion:>=12.0.0
viteversion:>=2.0.0
yarnaddvite-plugin-html-D或
参数
类型
默认值
说明
entry
string
src/main.ts
入口文件
template
index.html
模板的相对路径
inject
InjectOptions
-
注入HTML的数据
minify
boolean｜MinifyOptions
是否压缩html
pages
PageOption
多页配置
data
Record
注入的数据
ejsOptions
EJSOptions
ejs配置项EJSOptions
tags
HtmlTagDescriptor
需要注入的标签列表
data可以在html中使用ejs模版语法获取
默认会向index.html注入.env文件的内容，类似vite的loadEnv函数
filename
html文件名
injectOptions
默认压缩配置
eslint完全可配置，它的目标是提供一个插件化的javascript代码检测工具。这意味着您可以关闭每个规则，只能使用基本语法验证，或者混合并匹配捆绑的规则和自定义规则，使eslint完美的适用于当前项目。
目标：能够知道ESLint常见的语法规则，并在实际开发中遵守这些规则
官方概念：ESLint是可组装的JavaScript和JSX检查工具。
通俗理解：一个代码格式的检查工具，用来约束团队成员的代码风格。
好处：
保证团队协作开发时，编写出来的代码风格保持一致。例如：
①函数名和括号之间要有一个空格②JS中的字符串，统一使用单引号表示③一行代码结束加不加分号④不允许出现≥2个的连续空行⑤import必须放到文件的最上面⑥文件结尾要留一行空行⑦对象的末尾不要有多余的逗号
你可以使用该命令安装并配置ESLint：
npminit@eslint/config注意：使用npminit@eslint/config时，运行目录需要已经有package.json文件了。如果还没有该文件，请确保在此之前运行npminit或yarninit。
在此之后，你可以像这样使用ESLint检查任一文件或目录：
npxeslintyourfile.js#或yarnruneslintyourfile.js也可以全局安装ESLint而不仅限于本地（使用npminstalleslint--global）。但并不推荐这样做，因为无论使用哪种安装方式，你都需要在本地安装插件和可共享配置。
1、创建一个空项目、初始化为node项目
2、配置ESLint项目
3、创建index.js文件
for(vari=0;i<100;i--){}注意这里故意把i++写成了i--，代码块中没有内容。
4、执行eslint检查
发现了2个错误
规则解释一：
src/index.js
if(!!(typeofwindow!=="undefined")){console.log("Hellowindow!");}执行命令：
执行命令：npxeslintindex.js--fix
双重否定被删除。
使用npm脚本我们添加一个npmscripts来运行ESLint规则。
例如，假设您的package.json文件包含以下行：
{"scripts":{"lint:fix":"eslint.--fix"}}现在，您只需要在命令行运行npmrunlint:fix，它将修复它可修复的内容。
vscode中安装插件，安装插件后可以修正错误。
设置
//ESLint插件的配置"editor.codeActionsOnSave":{"source.fixAll":true,},插件的使用
插件可以修正错误，可以忽视错误。
如果在同一目录下存在多个配置文件，ESLint将按照以下优先顺序以此使用其一：
要在配置文件中使用env键指定环境，并通过将每个环境设置为true想启用的环境。例如，下面是启用浏览器和Node.js环境的例子：
{"env":{"browser":true,"node":true}}或者在package.json文件中
{"name":"mypackage","version":"0.0.1","eslintConfig":{"env":{"browser":true,"node":true}}}2.5.2、配置规则ESLint有大量的内置规则，你可以通过插件添加更多的规则。你也可以通过配置注释或配置文件来修改你的项目使用哪些规则。要改变一个规则的设置，你必须把规则的ID设置为这些值之一。
（1）、字符指定规则
要使用配置注释在文件中配置规则，请使用以下格式的注释：
/*eslinteqeqeq:0,curly:2*/这个例子与上一个例子相同，只是它使用了数字代码而不是字符串值。关闭eqeqeq规则，curly规则设置为错误。
（3）、指定额外选项
如果一个规则有额外的选项，你可以使用数组字面的语法来指定它们，比如：
（4）、配置注释
配置注释可以包括描述，以解释为什么注释是必要的。描述必须出现在配置之后，并以两个或多个连续的-字符与配置分开。比如。
{"rules":{"eqeqeq":"off","curly":"error","quotes":["error","double"]}}而在YAML中则是：
---rules:eqeqeq:offcurly:errorquotes:-error-double要配置一个定义在插件中的规则，你必须在规则的ID前加上插件的名称和/。比如说：
{"plugins":["plugin1"],"rules":{"eqeqeq":"off","curly":"error","quotes":["error","double"],"plugin1/rule1":"error"}}而在YAML中则是：
---plugins:-plugin1rules:eqeqeq:0curly:errorquotes:-error-"double"plugin1/rule1:error在这些配置文件中，规则plugin1/rule1来自名为plugin1的插件。你也可以在配置注释中使用这种格式，比如：
/*eslint"plugin1/rule1":"error"*/注意：当从插件中指定规则时，确保省略eslint-plugin-。ESLint只在内部使用无前缀的名字来定位规则。
(1)、禁用所有规则
要在你的文件中暂时禁用规则警告，可以使用以下格式的块状注释：
你还可以禁用或启用特定规则的警告：
要禁用整个文件中的规则警告，在文件的顶部写入/*eslint-disable*/块注释：
要禁用某一特定行的所有规则，请使用以下格式之一的行或块注释：
字符串选项：
对象选项（"always"时）：
对象选项（"never"时）：
注意：beforeStatementContinuationChars不适用于类域，因为类域不是语句。
上述所有方法也适用于插件规则。比如，要禁用eslint-plugin-example的rule-name规则，将插件的名称（example）和规则的名称（rule-name）合并为example/rule-name：
foo();//eslint-disable-lineexample/rule-namefoo();/*eslint-disable-lineexample/rule-name*/配置注释可以包括说明，以解释为什么注释是必要的。描述必须在配置之后，并且需要用两个或多个连续的-字符与配置分开。比如：
要在配置文件中禁用一组文件的规则，请使用overrides键和files键。比如：
{"rules":{...},"overrides":[{"files":["*-test.js","*.spec.js"],"rules":{"no-unused-expressions":"off"}}]}no-unused-expressions：一个未使用的表达式对程序的状态没有影响，表明是一个逻辑错误。
例如，n+1;不是一个语法错误，但它可能是一个打字错误，程序员的意思是一个赋值语句n+=1;。有时，这种未使用的表达式可能会被生产环境中的一些构建工具消除，这可能会破坏应用逻辑。
要禁用所有内联配置注释，请使用noInlineConfig设置。比如：
{"ignorePatterns":["temp.js","**/vendor/*.js"],"rules":{//...}}如果glob模式以/开头，该模式是相对于配置文件的基本目录而言的。例如，lib/.eslintrc.json中的/foo.js会匹配lib/foo.js，而不是匹配lib/subdir/foo.js。
如果配置是通过--configCLI选项提供的，配置中以/开头的忽略模式是相对于当前工作目录的，而不是给定配置的基本目录。例如，如果使用--configconfigs/.eslintrc.json，配置中的忽略模式是基于.而不是./configs。
你可以通过在项目的根目录下创建.eslintignore文件来告诉ESLint要忽略哪些文件和目录。.eslintignore文件是一个纯文本文件，其中每一行都是一个glob模式，表示哪些路径应该被省略掉。例如，下面的内容将忽略所有的JavaScript文件：
**/*.js当运行ESLint时，在决定要检查的文件范围前，它会在当前工作目录中寻找.eslintignore文件。如果找到该文件，那么在遍历目录时就会应用这些偏好。每次只能使用一个.eslintignore文件，且仅会使用当前工作目录中的.eslintignore文件。
特别要注意的是，像.gitignore文件一样，所有用作.eslintignore和--ignore-pattern的模式的路径必须使用正斜杠作为路径分隔符。
除了.eslintignore文件中的任何模式外，ESLint总是遵循一些隐含的忽略规则，即使通过了--no-ignore标志。这些隐含的规则如下：
这些规则也有一些例外：
如果要检查的路径是一个glob模式或目录路径，并且是点文件夹，则检查所有点文件和点文件夹，包括目录结构深处的点文件和点文件夹。
例如，eslint.config/将对.config目录下的所有点文件夹和点文件进行检查，包括一级子目录以及在目录结构中更深的子目录。
如果要检查的路径是一个特定的文件路径，并且通过了--no-ignore标志，ESLint将检查该文件，而不考虑隐含的忽略规则。
例如，eslint.config/my-config-file.js--no-ignore将检查my-config-file.js。需要注意的是，同样的命令如果没有--no-ignore行，就不会对my-config-file.js文件进行检测。
通过--ignore-pattern或.eslintignore指定的Allowlist和denylist规则会优先于隐含的忽略规则。
例如，在这种情况下，.build/test.js是允许列表的理想文件。因为默认忽略了所有点文件夹及其子文件，.build必须首先要处于允许列表中，这样eslint才会知道它的子文件。然后，.build/test.js必须被明确地列入允许列表，而其余的内容则被拒绝列表。这可以通过以下.eslintignore文件完成：
要在配置文件内配置插件，请使用plugins键，它应该是由插件名称组成的列表。可以省略插件名称中的eslint-plugin-前缀。
{"plugins":["plugin1","eslint-plugin-plugin2"]}安装插件：eslint-plugin-html检查html中的语法
配置文件：
将原来的"dev":"vite""dev":"vite--force--host"进行替换，这样就可以输出网络访问地址，每次运行也会更新依赖内容。
1.安装ESLint
npmadd-Deslint2.初始化ESLint配置
npxeslint--init3.安装vite-plugin-eslint（eslint结合vite使用）
//说明:该包是用于配置vite运行的时候自动检测eslint规范不符合页面会报错npmadd-Dvite-plugin-eslint