Vue CLI VS Vite - 技术栈

Vue CLI与Vite区别：

Vue CLI与Vite之间存在明显的区别，这些区别主要体现在实现原理、优化策略、开发环境速度、构建速度、依赖关系分析和插件系统等方面。以下是关于Vue CLI和Vite区别的详细分析：

实现原理 ：
- Vue CLI：使用Webpack作为默认的构建工具。Webpack是一个模块打包工具，它将项目中的所有资源打包成一个或多个bundle，以优化加载性能 。Vue CLI还支持其他构建工具，如Parcel。
- Vite：基于ESModule的构建工具。它利用原生ESModule的特性，将每个文件作为一个模块，通过浏览器去解析和执行，而不需要提前将文件打包成一个单独的bundle。
优化策略 ：
- Vue CLI：通过多个功能和插件来进行优化，包括代码分割、压缩、缓存等。Webpack提供的各种功能使得Vue CLI能够灵活地配置和优化构建输出。
- Vite：在开发环境中通过将源代码直接发送到浏览器，避免了传统的打包过程，实现了更快的开发启动速度。此外，Vite还通过按需加载模块和使用缓存来提高构建和打包的性能。
开发环境速度 ：
- Vue CLI：启动速度相对较慢，因为它需要进行完整的打包过程。
- Vite：开发环境启动速度较快，因为它充分利用了原生ESModule的特性，避免了传统的打包过程。
构建速度 ：
- Vue CLI：在构建速度上可能相对较慢一些，尤其是在大型项目中，因为Webpack需要处理和分析项目中的所有依赖和模块。
- Vite：由于Vite在开发环境中的优势，构建速度通常也较快。
依赖关系分析 ：
- Vue CLI：Webpack在处理依赖关系时，可能不如Vite那样细粒度，因此可能存在一些冗余的模块。
- Vite：可以更细粒度地分析依赖关系，实现按需加载，减小了构建体积。
插件系统 ：
- Vue CLI：使用基于Webpack的插件系统，Webpack生态相对成熟，有更多的插件可供选择。
- Vite：使用了Rollup作为其构建引擎，这与Vue CLI使用的Webpack不同。这也导致了一些在插件系统上的不同。

综上所述，Vue CLI和Vite各有其优势和特点。Vue CLI以其丰富的插件和灵活的Webpack配置而受到开发者的青睐，而Vite则以其快速的启动速度和开发体验成为现代前端开发的热门选择。根据项目的具体需求和开发者的偏好，可以选择适合的构建工具。

webpack

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。以下是关于 Webpack 的详细解释，按照清晰的格式分点表示和归纳：

1. 基本概念

定义：Webpack 是一个模块打包器（module bundler），它可以将许多分散的模块按照依赖关系打包成一个或多个 bundle，以供浏览器使用。
作用：在 Webpack 的处理过程中，它会构建一个依赖图（dependency graph），这个图对应到项目所需的每个模块，并生成一个或多个 bundle。

2. 主要功能

代码分割：Webpack 可以将代码分割成不同的 chunk，实现按需加载，降低初始化时间。
模块化：Webpack 天然支持模块化，包括 CommonJS、AMD、ES6 等模块语法。
Tree Shaking：在 Webpack 2.0 中引入，用于提取公共代码，去掉死亡代码，减少打包后的文件大小。
加载器（Loaders）：Webpack 使用加载器来处理非 JavaScript 文件（如 CSS、图片等），并将它们转换为浏览器可识别的格式。
插件（Plugins）：Webpack 允许使用插件来扩展其功能，如 HotModuleReplacementPlugin（热模块替换插件）、html-webpack-plugin（生成 HTML 文件插件）等。

3. 配置文件

webpack.config.js ：Webpack 的主要配置文件，用于定义入口文件、输出路径、加载器、插件等选项。

4. 入口（Entry）与出口（Output）

入口：指定 Webpack 从哪个模块开始构建依赖关系图。可以是单入口或多入口。
出口：定义 Webpack 打包后的文件输出位置和名称。

5. 优化策略

减少入口文件大小：将入口文件拆分为多个较小的模块，使用动态导入（dynamic imports）按需加载。
代码分割：通过配置 Webpack 的代码分割功能，将项目代码分割成多个块（chunks），并在需要时按需加载。
使用 Tree Shaking：只保留项目中实际使用到的代码，剔除未使用的代码。
优化加载速度：使用插件如 MiniCssExtractPlugin 提取 CSS 代码，使用 babel-loader 的缓存机制等。
并行构建：使用插件如 thread-loader 或 happypack 将任务分发给多个子进程并行处理。

6. 插件系统

Webpack 提供了强大的 Plugin 接口，允许开发者通过插件来扩展其功能。插件可以用于执行范围广泛的任务，如优化、压缩、混淆、哈希等。

7. 与其他工具的区别

与 Grunt 和 Gulp 的区别：Grunt 和 Gulp 是任务运行器，用于执行一系列任务（如编译、压缩等）。而 Webpack 则是一个模块打包器，它将项目中的所有资源打包成一个或多个 bundle。

8. 总结

Webpack 是一个功能强大的模块打包工具，它可以帮助开发者更有效地管理和优化现代 JavaScript 应用程序的资源。通过配置入口、出口、加载器和插件等选项，Webpack 可以实现代码分割、模块化、Tree Shaking 等功能，从而提高应用程序的性能和可维护性。

Vue Cli配置文件 VS Vite配置文件

Vue Cli配置文件

vue.config.js 是 Vue CLI 项目中的一个可选配置文件，它允许你对 Vue CLI 项目的底层 webpack 配置进行更细粒度的调整。然而，需要注意的是，vue.config.js 主要用于 Vue CLI 3 和 Vue CLI 2（通过 vue-cli-service） ，而 Vite 并不使用这个文件，因为 Vite 的构建配置是通过 vite.config.js 或 vite.config.ts 来进行的。

vue.config.js 配置文件详解

以下是一些常见的 vue.config.js 配置项：

publicPath
- 类型：string
- 默认值：'/'
- 用途：构建时的公共路径。例如，如果你打算将你的应用部署在子路径上，你需要设置这个值。
outputDir
- 类型：string
- 默认值：'dist'
- 用途：指定构建的输出目录。
assetsDir
- 类型：string
- 默认值：''
- 用途：放置生成的静态资源（js、css、img、fonts）的目录（相对于 outputDir）。
indexPath
- 类型：string
- 默认值：'index.html'
- 用途：指定生成的 index.html 的输出路径（相对于 outputDir）。
filenameHashing
- 类型：boolean
- 默认值：true
- 用途：是否在构建的文件名中包含 hash。
css
- 类型：Object
- 用途：对 CSS 相关的 webpack 加载器进行配置。
  - extract：是否将 CSS 提取到单独的文件中。
  - sourceMap：是否为 CSS 开启 source map。
  - loaderOptions：对 CSS 加载器进行更细粒度的配置。
devServer
- 类型：Object
- 用途：对开发服务器进行配置。
  - port：开发服务器监听的端口。
  - host：开发服务器监听的地址。
  - https：是否使用 HTTPS。
  - open：是否在构建完成后自动打开浏览器。
  - ... 以及其他 webpack-dev-server 的配置项。
configureWebpack
- 类型：Object | Function
- 用途：直接修改底层的 webpack 配置。
  - 如果你返回一个对象，它会被合并到最终的 webpack 配置中。
  - 如果你返回一个函数，它会被调用并接收当前的 webpack 配置作为参数。你可以直接修改这个配置，或者返回一个新的配置对象。
chainWebpack
- 类型：Function
- 用途：一个基于 webpack-chain 的函数，允许你以链式 API 的方式修改 webpack 配置。
pluginOptions
- 类型：Object
- 用途：为第三方插件提供选项。

Vite配置文件

vite.config.js 或 vite.config.ts 是 Vite 的配置文件，它允许你定制 Vite 的构建和开发行为。以下是一些常见的配置项：

build
- outDir：构建输出目录。
- assetsDir：静态资源目录。
- rollupOptions：传递给 Rollup 的选项。
- minify：是否压缩代码。
- ...等等
resolve
- alias：为模块路径设置别名。
- dedupe：去重相同的依赖。
- ...等等
css
- preprocessorOptions：CSS 预处理器选项（如 Sass、Less 等）。
- postcss：PostCSS 配置。
- ...等等
server
- port：开发服务器端口。
- host：开发服务器主机。
- https：启用 HTTPS。
- proxy：设置代理规则。
- cors：配置 CORS。
- ...等等
plugins
- 你可以在这里添加或配置 Vite 插件。
optimizeDeps
- 用于优化依赖项预构建的选项。
define
- 全局定义常量。
esbuild
- 用于配置 esbuild 的选项（Vite 使用 esbuild 进行快速的 JavaScript 转换）。
resolve.include
- 强制包含某些文件或目录，即使它们没有被显式导入。
envDir
- 指定 .env 文件的目录。
test
- 单元测试相关的配置。
features
- 启用或禁用 Vite 的某些特性。

常见问题：

[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?

这个错误信息表明 Vite 构建工具在尝试编译 Less 样式文件时，找不到对应的 Less 预处理器的依赖。Less 是一种 CSS 预处理器，它允许你使用变量、嵌套规则、混合(mixin)等特性来编写更可维护的样式代码。

为了解决这个问题，你需要确保已经安装了 Less 预处理器以及与之相关的 Vite 插件（如果适用）。以下是解决步骤：

安装 Less 和（可选的）Vite 插件：

首先，你需要安装 Less 预处理器。如果你使用的是 npm，可以运行以下命令：

npm install less --save-dev

如果你使用的是 yarn，则运行：

yarn add less --dev

如果你正在使用 Vite 并且想要一个专门为 Less 设计的插件（尽管 Vite 本身可能已经内置了对 Less 的支持），你可以安装 vite-plugin-less（如果它存在并且你需要特定的功能）。但是，请注意，截至 2023 年，Vite 官方已经内置了对 Less 的支持，因此你可能不需要额外的插件。

npm install node-less

配置 Vite（如果你使用了额外的插件）：

如果你安装了 vite-plugin-less，你需要在 Vite 的配置文件中（通常是 vite.config.js 或 vite.config.ts）添加相应的插件配置。例如：

// vite.config.js  
import less from 'vite-plugin-less';  

export default {  
  plugins: [  
    // ... 其他插件  
    less(),  
  ],  
  // ... 其他配置  
};

但请注意，由于 Vite 可能已经内置了对 Less 的支持，因此这步可能是不必要的。
重启 Vite 开发服务器：

安装完依赖后，你需要重启 Vite 开发服务器来应用这些更改。你可以通过停止当前的服务器进程并重新启动它来完成这个操作，或者使用热重载（如果它支持的话）。
清除缓存：

有时候，构建工具可能会缓存旧的配置或依赖。如果你怀疑这是问题所在，可以尝试清除 Vite 的缓存并再次尝试构建。对于 Vite，通常可以通过删除 node_modules/.vite 目录和 package-lock.json 或 yarn.lock 文件，然后重新安装依赖来清除缓存。

按照这些步骤操作后，你应该能够解决 "Preprocessor dependency 'less' not found" 的错误。