大家好，我是讯享网，很高兴认识大家。



Vite（法语意为 "快速的"，发音 ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

Vite 意在提供开箱即用的配置，同时它的  和  带来了高度的可扩展性，并有完整的类型支持。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）

Vue 脚手架工具 vue-cli 使用 webpack 进行打包，开发时可以启动本地开发服务器，实时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢

而对于开发时文件修改后的热更新 HMR 也存在同样的问题

Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次

Vite 则很好地解决了上面的两个问题

打包问题

vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载

热更新问题

vite 采用立即编译当前修改文件的办法。同时 vite 还会使用缓存机制( http 缓存 => vite 内置缓存 )，加载更新后的文件内容

所以，vite 具有了快速冷启动、按需编译、模块热更新等优良特质

综上所述，vite 构建项目与 vue-cli 构建的项目在开发模式下还是有比较大的区别：

方法一：

要使用 Vite 来创建一个 Vue 项目，非常简单：

这个命令会安装和执行 ，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

上面提到的两种在线演练场也支持将文件作为一个 Vite 项目下载。

方法二：

Vite 需要  版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

使用 Yarn:

使用 PNPM:

 code .可以使用visual studio code打开代码编辑窗口。

1.3.1、导入自定义模块错误

vite+Ts+Vue3搭建的项目中，把Ts类型文件抽离出去，再导入到页面组件时，出现“导入路径不能以“.ts”扩展名结束”的爆红错误，但这个错误并不影响项目运行。

 解决方法：

path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径。

不能解析@的问题，修改tsconfig.json文件

增加：

1.3.2、导入内置模块错误

在vite.config.ts 配置 报错 找不到模块“path”或其相应的类型声明

 解决方法：

1.3.3、找不到模块“https://cloud.tencent.com/developer/article/App.vue”或其相应的类型声明。ts(2307)

 解决方法：在vite-env.d.ts文件中增加以下声明：

1.4.0、共享配置

base

开发或生产环境服务的公共基础路径。合法的值包括以下几种：

mode

在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行  选项来重写。

main.ts中使用console.log(import.meta.env);查看

envDir

用于加载  文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。

关于环境文件的更多信息，请参见 。

 envDir:path.resolve(__dirname, ‘config’),

 文件

Vite 使用  从你的  中的下列文件加载额外的环境变量：

环境加载优先级

一份用于指定模式的文件（例如 ）会比通用形式的优先级更高（例如 ）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被  类文件覆盖。例如当运行  的时候。

 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过  以字符串形式暴露给客户端源码。

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

只有  会被暴露为  提供给客户端源码，而  则不会。

此外，Vite 使用  来直接拓展变量。想要了解更多相关语法，请查看 。

请注意，如果想要在环境变量中使用  符号，则必须使用  对其进行转义。

如果你想自定义 env 变量的前缀，请参阅 。

安全注意事项

1.4.1、主机与端口配置

server.host

指定服务器应该监听哪个 IP 地址。 如果将此设置为  或者  将监听所有地址，包括局域网和公网地址。

也可以通过 CLI 使用  或  来设置。

server.port

指定开发服务器端口。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。

server.strictPort

设为  时若端口已被占用则会直接退出，而不是尝试下一个可用端口。

测试无效，端口被占用启动不了服务器监听程序。

1.4.2、HTTPS

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTPS和HTTP的主要区别

1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

npm i mkcert

生成ca证书

再根据ca证书生成cert证书

安装证书

 修改vite.config文件

@vitejs/plugin-basic-ssl

另一个方案比较适用的方案，就是自己本地生成证书，并且让浏览器或者系统信任本地证书，项目内进行简单的配置就可以实现访问 . 生成证书工具可以借助 或者

Vite 项目

Vite 项目可以使用官方插件 , 已经帮你生成好了证书，直接引入该插件即可。

启动服务后访问 即可。

1.4.3、自动打开浏览器

server.open

在开发服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。若你想指定喜欢的浏览器打开服务器，你可以设置环境变量 （例如：）。查看  获取更多细节。

示例：

1.4.4、别名

resolve.alias

将会被传递到  作为 。也可以是一个对象，或一个  的数组。

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

更高级的自定义解析方法可以通过  实现。

1.4.5、SCSS

css直接支持

sass无需配置vite，直接安装即可直接使用

npm i sass -D

如果想全局引用可以做如下配置:

src/assets/scss/global.scss

vite.config

Counter.vue

运行

1.4.6、less

less无需配置vite，直接安装即可直接使用

npm i less -D

如果想全局引用可以做如下配置:

src/assets/less/global.less

vite.config

Counter.vue

运行：

1.4.7、设置最终构建的浏览器兼容目标

??与||的区别

//或运算如果为0,null,undefined,false,""则取表达式2的值

let v=100;

let c=v||"默认值1";

console.log©;

//??如果第1个表达式的值为undefined,null则取表达式2的值,否则取表达式1的值,ES2020新增加

let vv=null;

let cc=vv??"默认值2";

let dd=vv===null||vv===undefined?"默认值2":vv;

console.log(cc);

let c=1;  //或运算如果为0,null,undefined,false,""则取表达式2的值,否则取表达式1的值

let v=c||2;

console.log(v);

let e=null; //??如果第1个表达式的值为undefined,null则取表达式2的值,否则取表达式1的值

let f=e??3;

console.log(f);

let g=c??4;

console.log(g);

都可以使用?:表达式替代

build.target

设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——，这是指 、 和  的浏览器。

另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小：

转换过程将会由 esbuild 执行，并且此值应该是一个合法的 。自定义目标也可以是一个 ES 版本（例如：）、一个浏览器版本（例如：）或是多个目标组成的一个数组。

注意：如果代码包含不能被  安全地编译的特性，那么构建将会失败。查看  获取更多细节。

1.4.8、指定输出路径

build.outDir

指定输出路径（相对于 ).

1.4.9、静态资源目录

build.assetsDir

指定生成静态资源的存放路径（相对于 ）。

1.4.10、内联资源大小限定

build.assetsInlineLimit

小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为  可以完全禁用此项。

Git LFS 占位符会自动排除在内联之外，因为它们不包含它们所表示的文件的内容。

1.4.11、拆分CSS代码

build.cssCodeSplit

启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时插入。

如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。

1.4.12、压缩空间

build.minify

设置为  可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 ，它比 terser 快 20-40 倍，压缩率只差 1%-2%。

注意，在 lib 模式下使用  时， 选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。

当设置为  时必须先安装 Terser。

1.4.13、预览

你可以运行  命令来执行应用的构建。

默认情况下，构建会输出到  文件夹中。你可以部署这个  文件夹到任何你喜欢的平台。

本地测试应用

当你构建完成应用后，你可以通过运行  命令，在本地测试该应用。

 命令会在本地启动一个静态 Web 服务器，将  文件夹运行在 。这样在本地环境下查看该构建产物是否正常可用就方便多了。

你可以通过  参数来配置服务的运行端口。

现在  命令会将服务器运行在 。

preview.host

为开发服务器指定 ip 地址。 设置为  或  会监听所有地址，包括局域网和公共地址。

还可以通过 CLI 进行设置，使用  或 。

注意

在某些情况下，可能响应的是其他服务器而不是 Vite。 查看  了解更多细节。

preview.port

指定开发服务器端口。注意，如果设置的端口已被使用，Vite 将自动尝试下一个可用端口，所以这可能不是最终监听的服务器端口。

示例：

preview.strictPort

设置为  时，如果端口已被使用，则直接退出，而不会再进行后续端口的尝试。

preview.https

启用 TLS + HTTP/2。注意，只有在与  同时使用时，才会降级为 TLS。

该值也可以传递给  的 。

preview.open

开发服务器启动时，自动在浏览器中打开应用程序。当该值为字符串时，它将被用作 URL 的路径名。如果你想在你喜欢的某个浏览器打开该开发服务器，你可以设置环境变量  （例如 ）。欲了解更多细节，请参阅 。

preview.proxy

为开发服务器配置自定义代理规则。其值的结构为  的对象。如果 key 以  开头，它将被识别为 ，其中  选项可用于访问代理实例。

基于  实现，完整的参数列表参见 。

preview.cors

为开发服务器配置 CORS。此功能默认启用并支持任何来源。可传递一个  来进行配置，或者传递  来禁用此行为。

1.4.14、使用插件

Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统，同时根据需要也能够扩展开发服务器和 SSR 功能。

添加一个插件

若要使用一个插件，需要将它添加到项目的  并在  配置文件中的  数组中引入它。例如，要想为传统浏览器提供支持，可以按下面这样使用官方插件 ：

 也可以接受包含多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性（如框架集成）很有用。该数组将在内部被扁平化。

Falsy 虚值的插件将被忽略，可以用来轻松地启用或停用插件。

什么是polyfill

简单来说，polyfill就是兼容旧浏览器的代码块，磨平差异。比如说 有的浏览器不支持 , 那我们可以自己实现一个globalThis然后注入到script中

讯享网

注意：和是两个概念， 前者是添加额外的代码来使得旧浏览器支持某些特性，后者是把浏览器不认识的语法转化为可以运行的语法

vite的polyfill分为 (modernPolyfills属性)和 (polyfills属性)，之所以区分开来，是为了尽量减少polyfills的大小

targets

设置目标浏览器兼容的范围。

如果显式设置，则将其传递给@babel/preset-env。该选项与。默认值：defaults，是 Browserslist 推荐的值。

最新版本

浏览器版本

Node.js 版本

extends browserslist-config-mycompany 从 browserslist-config-mycompanynpm 包中获取查询。 supports es6-module 支持特定功能的浏览器。es6-module 这是 Can I Use 页面 feat 的 URL 中的参数。可以在 caniuse-lite/data/features 找到所有可用功能的列表。 browserslist config Browserslist 配置中定义的浏览器。在差异服务中很有用，可以修改用户的配置，例如 browserslist config and supports es6-module. since 2015or last 2 years 自 2015 年以来发布的所有版本（也since 2015-03和since 2015-03-10）。 unreleased versions或unreleased Chrome versions alpha 和 beta 版本。

在项目根目录中，查询选择了哪些浏览器。

查找插件

Vite 旨在为常见的 Web 开发范式提供开箱即用的支持。在寻找一个 Vite 或兼容的 Rollup 插件之前，请先查看 。大量在 Rollup 项目中需要使用插件的用例在 Vite 中已经覆盖到了。

查看  获取官方插件信息。社区插件列表请参见 。而对于兼容的 Rollup 插件，请查看  获取一个带使用说明的兼容 Rollup 官方插件列表，若列表中没有找到，则请参阅 。

你也可以使用此  来找到一些遵循了  的 Vite 插件，或者通过  获取 Rollup 插件。

vite-plugin-html

功能

安装 (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

或

使用

多页应用配置

参数说明

UserOptions

InjectOptions

 可以在  中使用  模版语法获取

env 注入

默认会向 index.html 注入  文件的内容，类似 vite 的 函数

PageOption

MinifyOptions

默认压缩配置

运行示例

1.4.15、CSS Modules

任何以  为后缀名的 CSS 文件都被认为是一个 。导入这样的文件会返回一个相应的模块对象：

CSS modules 行为可以通过  进行配置。

如果  设置开启了 camelCase 格式变量名转换（例如 ），你还可以使用按名导入。

home.module.css

1.4.16、禁用 CSS 注入页面

自动注入 CSS 内容的行为可以通过  参数来关闭。在关闭时，被处理过的 CSS 字符串将会作为该模块的默认导出，但样式并没有被注入到页面中。

1.4.17、静态资源处理

导入一个静态资源会返回解析后的 URL：

添加一些特殊的查询参数可以更改资源被引入的方式：

eslint 属于一种 QA（Quality Assurance）工具，是一个 ECMAScript/JavaScript 语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

eslint 完全可配置，它的目标是提供一个插件化的 javascript 代码检测工具。这意味着您可以关闭每个规则，只能使用基本语法验证，或者混合并匹配捆绑的规则和自定义规则，使 eslint 完美的适用于当前项目。

目标：能够知道 ESLint 常见的 语法规则 ，并在实际开发中遵守这些规则

官方概念：ESLint 是可组装的 JavaScript 和 JSX 检查工具。

通俗理解：一个代码 格式 的检查 工具 ，用来 约束 团队成员的 代码风格 。

好处 ：

保证团队协作开发时，编写出来的 代码风格 保持一致。例如：

① 函数名和括号之间要有一个空格 ② JS 中的字符串，统一使用 单引号 表示 ③ 一行代码结束加不加 分号 ④ 不允许 出现 ≥2 个 的连续空行 ⑤ import 必须放到文件的最上面 ⑥ 文件结尾要 留一行空行 ⑦ 对象的末尾不要有多余的 逗号

官网：

源码：

[ESLint 中文官方网站]：

前提条件：内置 SSL 支持的  版本（、 或 ），如果你使用的是官方 Node.js 发行版，那么已经内置了 SSL 支持。

你可以使用该命令安装并配置 ESLint：

注意：使用  时，运行目录需要已经有  文件了。如果还没有该文件，请确保在此之前运行  或 。

在此之后，你可以像这样使用 ESLint 检查任一文件或目录：

也可以全局安装 ESLint 而不仅限于本地（使用 ）。但并不推荐这样做，因为无论使用哪种安装方式，你都需要在本地安装插件和可共享配置。

1、创建一个空项目、初始化为node项目

 2、配置ESLint项目

 3、创建index.js文件

注意这里故意把i++写成了i–，代码块中没有内容。

4、执行eslint检查

发现了2个错误

ESLint完整规则(rules)地址：

 规则解释一：

规则解释二：

有三种方法来修正错误：

2.4.1、命令修正

src/index.js

执行命令：

执行命令：npx eslint index.js –fix

 双重否定被删除。

使用 npm 脚本 我们添加一个 npm scripts 来运行 ESLint 规则。

例如，假设您的 package.json 文件包含以下行：

现在，您只需要在命令行运行 npm run lint:fix，它将修复它可修复的内容。

2.4.2、插件修正

vscode中安装插件，安装插件后可以修正错误。

 设置

插件的使用

 插件可以修正错误，可以忽视错误。

如果在同一目录下存在多个配置文件，ESLint 将按照以下优先顺序以此使用其一：

2.5.1、环境配置

要在配置文件中使用  键指定环境，并通过将每个环境设置为  想启用的环境。例如，下面是启用浏览器和 Node.js 环境的例子：

或者在  文件中

2.5.2、配置规则

ESLint 有大量的内置规则，你可以通过插件添加更多的规则。你也可以通过配置注释或配置文件来修改你的项目使用哪些规则。要改变一个规则的设置，你必须把规则的 ID 设置为这些值之一。

2.5.2.1、使用配置注释

eqeqeq：使用类型安全的相等运算符  和  而不是它们的常规运算符  和  被认为是好的做法。

curly：当一个块只包含一个语句时，JavaScript 允许省略大括号。然而，许多人认为，最好的做法是永远不要在块周围省略大括号，即使它们是可选的，因为这可能导致错误并降低代码的清晰度。

（1）、字符指定规则

要使用配置注释在文件中配置规则，请使用以下格式的注释：

（2）、数字指定规则

在这个例子中，关闭 ，启用  并视作错误。你也可以使用数字等价物来表示规则的严重程度。

这个例子与上一个例子相同，只是它使用了数字代码而不是字符串值。关闭  规则， 规则设置为错误。

（3）、指定额外选项

如果一个规则有额外的选项，你可以使用数组字面的语法来指定它们，比如：

这个注释为  规则指定了“双重”选项。数组中的第一项总是规则的严重程度（数字或字符串）。

（4）、配置注释

配置注释可以包括描述，以解释为什么注释是必要的。描述必须出现在配置之后，并以两个或多个连续的  字符与配置分开。比如。

使用配置文件

要在配置文件中配置规则，请使用  键和一个错误级别以及任何你想使用的选项。比如：

而在 YAML 中则是：

要配置一个定义在插件中的规则，你必须在规则的 ID 前加上插件的名称和 。比如说：

而在 YAML 中则是：

在这些配置文件中，规则  来自名为  的插件。你也可以在配置注释中使用这种格式，比如：

注意：当从插件中指定规则时，确保省略 。ESLint 只在内部使用无前缀的名字来定位规则。

2.5.3、禁用规则

使用配置注释

(1)、禁用所有规则

要在你的文件中暂时禁用规则警告，可以使用以下格式的块状注释：

(2)、禁用特定规则

你还可以禁用或启用特定规则的警告：

注意： 没有列出任何特定的规则将导致所有被禁用的规则被重新启用。

要禁用整个文件中的规则警告，在文件的顶部写入  块注释：

你还可以在整个文件范围内禁用或启用特定规则：

为了确保永远不会使用一个规则（无论未来是否会有任何启用/禁用行）：

(3)、禁用特定行规则

要禁用某一特定行的所有规则，请使用以下格式之一的行或块注释：

(4)、要禁用某一特定行的特定规则：

(5)、要禁用一个特定行的多个规则：

字符串选项：

对象选项（ 时 ）：

对象选项（ 时）：

注意： 不适用于类域，因为类域不是语句。

上述所有方法也适用于插件规则。比如，要禁用  的  规则，将插件的名称（）和规则的名称（）合并为 ：

配置注释可以包括说明，以解释为什么注释是必要的。描述必须在配置之后，并且需要用两个或多个连续的  字符与配置分开。比如：

注意：禁用文件一部分的警告的注释告诉 ESLint 不要报告被禁用的代码违反规则。然而，ESLint 仍然解析整个文件，所以禁用的代码仍然需要是语法上有效的 JavaScript。

使用配置文件

要在配置文件中禁用一组文件的规则，请使用  键和  键。比如：

no-unused-expressions：一个未使用的表达式对程序的状态没有影响，表明是一个逻辑错误。

例如， 不是一个语法错误，但它可能是一个打字错误，程序员的意思是一个赋值语句  。有时，这种未使用的表达式可能会被生产环境中的一些构建工具消除，这可能会破坏应用逻辑。

禁用内联注释

要禁用所有内联配置注释，请使用  设置。比如：

这个设置类似于  CLI 选项。

2.5.4、配置文件中的 

你可以在你的配置文件中使用  来告诉 ESLint 忽略特定的文件和目录。 模式遵循与  相同的规则。参见了解更多内容。

如果 glob 模式以  开头，该模式是相对于配置文件的基本目录而言的。例如， 中的  会匹配 ，而不是匹配。

如果配置是通过  CLI 选项提供的，配置中以  开头的忽略模式是相对于当前工作目录的，而不是给定配置的基本目录。例如，如果使用 ，配置中的忽略模式是基于  而不是 。

 文件

你可以通过在项目的根目录下创建  文件来告诉 ESLint 要忽略哪些文件和目录。 文件是一个纯文本文件，其中每一行都是一个 glob 模式，表示哪些路径应该被省略掉。例如，下面的内容将忽略所有的 JavaScript 文件：

当运行 ESLint 时，在决定要检查的文件范围前，它会在当前工作目录中寻找  文件。如果找到该文件，那么在遍历目录时就会应用这些偏好。每次只能使用一个  文件，且仅会使用当前工作目录中的  文件。

Glob 使用  进行匹配，因此有许多特性：

特别要注意的是，像  文件一样，所有用作  和  的模式的路径必须使用正斜杠作为路径分隔符。

请参阅  的规范，了解更多有效的语法实例。

除了  文件中的任何模式外，ESLint 总是遵循一些隐含的忽略规则，即使通过了  标志。这些隐含的规则如下：

这些规则也有一些例外：

如果要检查的路径是一个 glob 模式或目录路径，并且是点文件夹，则检查所有点文件和点文件夹，包括目录结构深处的点文件和点文件夹。

例如， 将对  目录下的所有点文件夹和点文件进行检查，包括一级子目录以及在目录结构中更深的子目录。

如果要检查的路径是一个特定的文件路径，并且通过了  标志，ESLint 将检查该文件，而不考虑隐含的忽略规则。

例如， 将检查 。需要注意的是，同样的命令如果没有  行，就不会对  文件进行检测。

通过  或  指定的 Allowlist 和 denylist 规则会优先于隐含的忽略规则。

例如，在这种情况下， 是允许列表的理想文件。因为默认忽略了所有点文件夹及其子文件， 必须首先要处于允许列表中，这样 eslint 才会知道它的子文件。然后， 必须被明确地列入允许列表，而其余的内容则被拒绝列表。这可以通过以下  文件完成：

与下面的  一样：

2.5.6、配置插件

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

要在配置文件内配置插件，请使用  键，它应该是由插件名称组成的列表。可以省略插件名称中的  前缀。

安装插件：eslint-plugin-html检查html中的语法

 配置文件：

2.6.1、创建一个vite项目

package.json配置

上图为控制台输入npm run dev后，展示的内容，为了获取本地IP，可以在配置的时候加上–host，方便自动获取本地网络地址；由于Vite的快是因为它将代码分为依赖和源码，依赖大多数时间不会改变，所以在开发运行中，依赖只会请求一次，而如果我们更新了依赖，浏览器没有同步更新就可能会造成运行错误，所以可以在脚本内添加–force来避免错误，每次启动运行脚本就会更新依赖，避免浏览器的强缓存所带来的影响，具体内容可以去Vite官网查看学习，这里不再展开。下图是脚本的配置：

将原来的"dev": "vite" 🔀 "dev": "vite –force –host"进行替换，这样就可以输出网络访问地址，每次运行也会更新依赖内容。

2.6.2、集成eslint

1.安装ESLint

2.初始化ESLint配置

3.安装vite-plugin-eslint（eslint结合vite使用）

 4.配置vite.config.ts文件

2.6.3、指定解析器

如果这时候就到这里结束了，则会出现：Parsing error: ‘>’ expected.eslint的错误，

默认情况下，ESLint 使用 作为其解析器。 […] 要指定 npm 模块用作解析器，请使用  文件中的  选项指定它。

安装vue-eslint-parser

npm i -D vue-eslint-parser

修改配置文件