Vue CLI 是一个基于 Vue.js 进行快速开发的全面工具，它通过一行命令就能帮助你初始化、开发和维护 Vue.js 项目。Vue CLI 提供了一个完整的系统，用于开发 Vue.js 项目，包括：项目初始化、代码脚手架、热重载、代码拆分等。
首先，确保你的系统已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令以全局安装 Vue CLI：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完 Vue CLI 后，通过以下命令创建一个新项目：
vue create my-project
你将会看到一系列选项让你配置项目，例如选择一个预设配置或手动设置项目。
一般情况下，使用 Vue CLI 创建的新项目会有以下目录结构：
.
├── babel.config.js
├── jsconfig.json
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ └── index.html
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── store
│ │ └── index.js
│ └── views
│ ├── AboutView.vue
│ └── HomeView.vue
├── vue.config.js
└── yarn.lock
下面是这些目录和文件的详细解释：
这是 Babel 的配置文件，用于定义如何转换 ES6+ 的 JavaScript 代码。Vue CLI 项目默认包含此文件，以便使用最新的 JavaScript 特性。
这个文件主要用于配置 TypeScript 的 JavaScript 项目。它可以帮助编辑器和 TypeScript 语言服务了解项目结构，并提供更好的模块解析和自动完成。
这个文件包含项目的元数据和依赖信息。它用于定义项目名称、版本、脚本等。
这个文件包含了整个 node_modules 文件夹的准确结构，包括所有依赖的具体版本。这确保了你在不同机器或环境中安装相同版本的依赖。
这个文件通常包含项目的基础信息，比如项目是如何运行的、如何构建等。
这是 Vue CLI 项目的可选配置文件，用于自定义 Vue CLI 服务的行为。
如果你使用 Yarn 作为包管理器，yarn.lock 文件会在根目录下生成。这个文件确保了 Yarn 安装的依赖具有一致性。
这是网站的图标。
这是项目的入口 HTML 文件。所有的 Vue 组件都会挂载到这个文件中一个名为 app 的 div 上。
这是主 Vue 组件文件，它是所有其他 Vue 组件的父组件。
用于存放项目的静态资源，如图片、样式等。
这里存放项目的 Vue 组件。这些组件用于构建更复杂的页面和布局。
这是项目的入口 JavaScript 文件。它负责创建 Vue 实例，并将 App.vue 挂载到 index.html。
如果你在项目中使用 vue-router，这个文件夹通常会包含路由配置。
如果你在项目中使用 vuex，这个文件夹通常会包含 Vuex store 的配置。
这个文件夹通常用于存放代表整个页面的 Vue 组件，这些组件通常会被 vue-router 直接使用。
package.json
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
在项目目录中，你可以运行以下命令来启动一个带有热重载的开发服务器：
npm run serve
构建用于生产的优化代码：
npm run build
这将会生成一个 dist/ 目录，包含用于生产环境的项目文件。
在一个由 Vue CLI 创建的 Vue.js 项目的 package.json 文件中，通常会看到一个 scripts 对象，这个对象定义了一些 npm 脚本命令。以下是这些脚本的详细解释：
"serve": "vue-cli-service serve"
这个命令用于启动一个开发服务器，并且自动地在默认的 web 浏览器中打开该服务器的地址（通常是 http://localhost:8080/）。这个开发服务器支持热重载（Hot Module Replacement，HMR），这意味着当你修改源代码后，不需要手动刷新浏览器，改动将自动出现。
内部实现上，vue-cli-service serve 使用了 webpack-dev-server，并且将其与 Vue.js 的开发环境进行了优化和定制。
"build": "vue-cli-service build"
这个命令用于构建生产环境下的项目。构建结果通常会输出到项目目录下的 dist/ 文件夹中。这个构建过程会包括各种优化，如代码拆分、压缩，以便获得最佳性能。
一般来说，这个 dist/ 文件夹就是你需要将其部署到生产服务器的内容。
"lint": "vue-cli-service lint"
这个命令用于运行代码检查，通常是基于 ESLint。代码检查有助于识别可能的错误和不符合编码规范的代码。
vue-cli-service lint 通常会自动修复一些简单的问题，并对不能自动修复的问题进行报告。
这些脚本都是基于 Vue CLI Service，这是一个运行时依赖（runtime dependency），封装了 webpack、ESLint 等工具，并暴露出一些命令行接口，以便在 Vue.js 项目中使用。
要运行这些命令，你只需要在项目的根目录下打开命令行，然后使用 npm run 或 yarn 命令：
npm run serve 或 yarn servenpm run build 或 yarn buildnpm run lint 或 yarn lint这些是 Vue CLI 项目中最常用的脚本命令，它们大大简化了开发过程，使你能更专注于编写应用逻辑，而不是配置各种工具。
在一个由 Vue CLI 创建的 Vue.js 项目的 package.json 文件中，你通常会看到 dependencies 和 devDependencies 这两个字段。这些字段列出了项目所依赖的 npm 包。
dependencies 包含了运行 Vue.js 应用所必需的库。devDependencies 包含了开发过程中需要的工具和库，这些不会被包含在最终的生产构建中。package.json
{
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
}
}
这是一个 JavaScript 标准库的 polyfill。它包括 ES6+ 的新特性和提案，使得这些新特性能在老版本浏览器中运行。
这是 Vue.js 框架本身。它包含用于创建 Vue 应用的所有基础功能。
Vue 的官方路由管理器。它和 Vue.js 深度集成，使构建单页面应用（SPA）变得容易。
Vue 的官方状态管理库。用于在 Vue 应用中管理共享状态。
Babel 的核心库，用于将 ES6+ 代码转译为老版本 JavaScript 代码。
一个 ESLint 解析器，用于与 Babel 配合，以支持最新的 JavaScript 特性。
Vue CLI 的 Babel 插件，用于在 Vue.js 项目中集成 Babel。
Vue CLI 的 ESLint 插件，用于在 Vue.js 项目中集成 ESLint。
Vue CLI 的 Router 插件，用于在 Vue.js 项目中集成 Vue Router。
Vue CLI 的 Vuex 插件，用于在 Vue.js 项目中集成 Vuex。
Vue CLI 服务，是 Vue CLI 的核心部分。它封装了 webpack、ESLint 等，并提供了命令行接口。
JavaScript 的静态检查工具，用于识别代码中的错误和不符合规范的写法。
用于支持 Vue.js 特定语法的 ESLint 插件。
Less 是一种 CSS 预处理器，用于编译 .less 文件为 .css 文件。
用于在 webpack 中编译 Less 文件的 loader。
用于预编译 Vue 2.x 模板的编译器。通常与 vue-loader 配合使用。
这是一个 TypeScript 的 tsconfig.json 配置文件。TypeScript 是一个由 Microsoft 开发的开源编程语言，是 JavaScript 的超集。tsconfig.json 文件用于配置 TypeScript 编译器的选项。以下是这个文件各个字段的解释：
jsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
}
}
这个字段包含用于配置 TypeScript 编译器的各种选项。
设置为 "es5"，意味着 TypeScript 代码会被编译成 ES5 版本的 JavaScript。这样做通常是为了确保代码能在旧版浏览器中运行。
设置为 "esnext"，意味着模块代码（import 和 export 语句）将保持为最新的 ECMAScript 标准。这通常用于进一步的代码分割或 tree-shaking。
设置为 "./"，这是解析非相对模块名称的基础目录。
设置为 "node"，这表示使用 Node.js 风格的模块解析算法。
这是一个路径映射列表，用于重新映射模块的查找位置。在这个例子中，任何从 "@/..." 开始的模块导入都会转换为从 "src/..." 目录下导入。这在 Vue 项目中尤其有用，因为它允许你避免使用相对路径。
这个字段用于指定编译过程中应包含的库文件。这里包括：
"esnext"：包括最新的 ECMAScript 功能。"dom"：包括 DOM 操作相关的类型定义。"dom.iterable"：包括可迭代的 DOM 集合（比如 NodeList）的类型定义。"scripthost"：包括用于与宿主环境（如浏览器或 Node.js）交互的对象的类型定义。"scripthost" 是一个较为特殊且不太常用的库选项，主要用于描述一些旧版的宿主环境（hosting environments），如 Windows Script Host（WSH）或者早期版本的 Internet Explorer。这个库选项包括了一些全局对象和宿主特定的功能，但这些大多是在现代前端开发中不常见或已经不再使用的。
Windows Script Host 是 Windows 系统中用于运行 VBScript 或 JScript 脚本的一个组件。与 Node.js 类似，它可以让你使用脚本语言进行系统编程，但它比 Node.js 要简单得多，并且只在 Windows 上可用。
在 tsconfig.json 的 compilerOptions 中包括 "scripthost" 主要是为了在这些特殊环境中得到适当的类型提示和自动完成。除非你有特殊需求（比如在旧版 IE 或 WSH 中运行代码），否则一般不需要在现代前端项目中包括这个选项。
总之，除非你正在进行一些非常特殊的开发工作，你可能永远都不需要用到 "scripthost"。在现代 web 开发或 Node.js 开发中，这个选项基本上是多余的。
在一个由 Vue CLI 创建的 Vue.js 项目中，通常会有一个 babel.config.js 文件。这个文件是用于配置 Babel 编译器的。
Babel 是一个非常流行的 JavaScript 编译器，它允许你使用最新的 ECMAScript 标准（和一些还在提案阶段的特性）来写代码。然后，Babel 将这些代码编译成老版本的 JavaScript，以确保它们可以在大多数浏览器中运行。
babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};
让我们来详细看看这个 babel.config.js 文件：
module.exports
这一行表明我们将导出一个配置对象，以便 Babel 可以使用。
presets
presets 是一个数组，用于列出一个或多个预设，以简化 Babel 配置。预设（Presets）是一组预先定义的 Babel 插件的集合，这样你就不需要单独地去配置各个 Babel 插件。
@vue/cli-plugin-babel/preset
这个预设是 Vue CLI 的 Babel 插件预设，它包括了为 Vue 应用程序推荐的 Babel 配置。
具体来说，这个预设通常会包括：
通过使用这个预设，你的 Vue.js 应用程序将能够利用最新的 JavaScript 特性，同时还能确保这些代码在大多数浏览器中可以正常运行。
总体来说，这个 babel.config.js 文件让你的项目能够利用 Babel 和 Vue CLI 已经预先定义好的最佳实践，这样你就可以专注于编写应用逻辑，而不必担心代码的兼容性问题。
在一个由 Vue CLI 创建的项目中，vue.config.js 文件是一个可选的配置文件，它暴露了用于调整内部 Webpack 配置的各种选项。你也可以在这里添加项目级别的配置。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
让我们看看 vue.config.js 文件内容：
引入 @vue/cli-service
const { defineConfig } = require('@vue/cli-service')
这行代码从 @vue/cli-service 包中引入 defineConfig 函数。这个函数用于定义配置对象，并确保该对象会被 Vue CLI 服务正确处理。
module.exports = defineConfig(...)
这里，你通过 module.exports 导出一个由 defineConfig 函数返回的配置对象。
transpileDependencies: true
transpileDependencies 选项用于指定哪些依赖应该通过 Babel 转译。默认情况下，依赖（node_modules 目录下的模块）不会被转译。
true 表示所有依赖都将被转译。这在一般情况下不是很高效，因为它会增加构建时间。总结
这个 vue.config.js 文件使用 Vue CLI 的 defineConfig 函数来定义配置，并设置所有 node_modules 依赖为需要 Babel 转译
vue inspect是一个 Vue CLI 的命令行工具，用于审查最终的 webpack 配置。当您使用 Vue CLI 创建项目时，webpack 的配置是被封装的，通常不直接暴露给开发者。但有时您可能需要查看或修改这些配置。这时，vue inspect 会非常有用。
以下是一些 vue inspect 的常见用法：
基础用法
vue inspect: 这会输出整个 webpack 配置对象到控制台。输出到文件
vue inspect > output.js: 通过将输出重定向到一个文件，您可以更方便地审查配置。查看特定部分
vue inspect --module.rules: 这会输出配置中 module.rules 的部分，这是一个包含多种文件类型和其对应 loaders 的数组。
vue inspect --plugins: 这会输出配置中所有已配置的 webpack 插件。
查看特定规则或插件
vue inspect --rule vue: 这会输出所有用于处理 .vue 文件的 webpack 规则。
vue inspect --plugin html: 这会输出用于处理 HTML 的 webpack 插件的配置。
这样，您就可以查看或复制这些配置，然后根据需要进行自定义。
请注意，虽然 vue inspect 允许您查看 webpack 配置，但如果您想要修改它，通常应在项目根目录下创建一个 vue.config.js 文件。在这个文件中，您可以导出一个对象，Vue CLI 会合并这个对象到其内部的 webpack 配置中。
// vue.config.js
module.exports = {
configureWebpack: {
// 自定义 webpack 配置
}
}
这样，您可以根据项目需求灵活地扩展或覆盖默认配置。
vue inspect > webpack.config.js
// 引入 output 配置模块
const output = require('./output');
// 引入 resolve 配置模块
const resolve = require('./resolve');
// 引入 resolveLoader 配置模块
const resolveLoader = require('./resolveLoader');
// 引入 module 配置模块
const module = require('./module');
// 引入 optimization 配置模块
const optimization = require('./optimization');
// 引入 plugins 配置模块
const plugins = require('./plugins');
// 导出 webpack 配置对象
module.exports = {
// 设置构建模式为开发模式
mode: 'development',
// 设置构建的上下文路径
context: 'C:/cliproject',
// 设置入口文件
entry: {
app: ['./src/main.js']
},
// 使用前面导入的 output 配置
output,
// 使用前面导入的 resolve 配置
resolve,
// 使用前面导入的 resolveLoader 配置
resolveLoader,
// 使用前面导入的 module 配置
module,
// 使用前面导入的 optimization 配置
optimization,
// 使用前面导入的 plugins 配置
plugins,
};
output.js
module.exports = {
// 指定哈希函数，用于生成唯一的模块标识符
hashFunction: 'xxhash64',
// 设置输出目录的绝对路径
path: 'C:/cliproject/dist',
// 指定输出文件的名称
filename: 'js/[name].js',
// 指定在浏览器中引用资源的基础路径
publicPath: '/',
// 指定非入口(non-entry) chunk 文件的名称
chunkFilename: 'js/[name].js'
}
resolve.js
module.exports = {
// 设置别名，这样在代码中可以更方便地引用资源
alias: {
'@': 'C:/cliproject/src',
// 设置Vue的别名，用于导入运行时版本
vue$: 'vue/dist/vue.runtime.esm.js'
},
// 文件扩展名列表，Webpack会按照这个列表中的顺序解析这些扩展名的文件
extensions: ['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
// 设置模块解析的查找目录
modules: ['node_modules', 'C:/cliproject/node_modules', 'C:/cliproject/node_modules/@vue/cli-service/node_modules']
}
resolveLoader.js
// 指定Webpack模块解析时应该搜索的目录
module.exports = {
modules: [
'C:/cliproject/node_modules/@vue/cli-plugin-babel/node_modules',
'C:/cliproject/node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat',
'node_modules',
'C:/cliproject/node_modules',
'C:/cliproject/node_modules/@vue/cli-service/node_modules'
]
};
optimization.js
// 引入TerserPlugin用于代码压缩
const TerserPlugin = require('terser-webpack-plugin');
// 导出Webpack配置对象
module.exports = {
// 关闭内容哈希
realContentHash: false,
// 配置代码分割
splitChunks: {
cacheGroups: {
// 定义一个名为'chunk-vendors'的缓存组，用于包含所有从node_modules导入的库
defaultVendors: {
name: 'chunk-vendors',
test: /[//]node_modules[//]/,
priority: -10,
chunks: 'initial'
},
// 定义一个名为'chunk-common'的缓存组，用于包含两次或更多次用于不同文件的模块
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
},
// 配置代码压缩工具
minimizer: [
new TerserPlugin({
// 配置Terser压缩选项
terserOptions: {
compress: {
// 各种压缩选项
// ...
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: true,
evaluate: true
},
// 兼容Safari 10
mangle: {
safari10: true
}
},
// 开启多线程压缩
parallel: true,
// 不提取注释
extractComments: false
})
]
}
plugins.js
// 引入处理 Vue 文件的 VueLoaderPlugin
const VueLoaderPlugin = require("vue-loader/lib/plugin");
// 引入用于定义全局常量的 DefinePlugin
const DefinePlugin = require("webpack/lib/DefinePlugin");
// 引入用于确保文件路径大小写敏感性的 CaseSensitivePathsPlugin
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
// 引入用于友好显示错误和警告的 FriendlyErrorsWebpackPlugin
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
// 引入用于生成 HTML 文件的 HtmlWebpackPlugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入用于复制文件或目录的 CopyPlugin
const CopyPlugin = require("copy-webpack-plugin");
// 引入用于集成 ESLint 的 ESLintWebpackPlugin
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
// 导出这些插件的配置
module.exports = [
// 使用 VueLoaderPlugin 处理 .vue 文件
new VueLoaderPlugin(),
// 定义全局常量
new DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}),
// 确保文件路径大小写敏感性
new CaseSensitivePathsPlugin(),
// 友好显示错误和警告
new FriendlyErrorsWebpackPlugin({
additionalTransformers: [function () { }],
additionalFormatters: [function () { }]
}),
// 生成 HTML 文件
new HtmlWebpackPlugin({
title: 'cliproject3',
scriptLoading: 'defer',
templateParameters: function () { },
template: 'C:/cliproject/public/index.html'
}),
// 复制文件或目录
new CopyPlugin({
patterns: [{
from: 'C:/cliproject/public',
to: 'C:/cliproject/dist',
toType: 'dir',
noErrorOnMissing: true,
globOptions: {
ignore: ['**/.DS_Store', 'C:/aprepare/cliproject3/public/index.html']
},
info: {
minimized: true
}
}]
}),
// 集成 ESLint
new ESLintWebpackPlugin({
extensions: ['.js', '.jsx', '.vue'],
cwd: 'C:/cliproject',
cache: true,
cacheLocation: 'C:/cliproject/node_modules/.cache/eslint/3d1771e1.json',
context: 'C:/cliproject',
failOnWarning: false,
failOnError: true,
eslintPath: 'C:/cliproject/node_modules/eslint',
formatter: 'stylish'
})
];
module.js
// 导出模块配置
module.exports = {
// 不解析的模块
noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
// 规则数组
rules: [{
// 测试正则表达式
test: /\.m?jsx?$/,
// 解析选项
resolve: {
// 完全指定为 false
fullySpecified: false
}
}, {
// 测试正则表达式
test: /\.vue$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/@vue/vue-loader-v15/lib/index.js',
// 选项对象
options: {
// 编译器选项
compilerOptions: {
// 空白处理方式
whitespace: 'condense'
}
}
}]
}, {
// 测试正则表达式
test: /\.vue$/,
// 资源查询
resourceQuery: /type=style/,
// 副作用为 true
sideEffects: true
}, {
// 测试正则表达式
test: /\.pug$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /vue/,
// 使用的加载器数组
use: [{
// 加载器为 'pug-plain-loader'
loader: 'pug-plain-loader'
}]
}, {
// 使用的加载器数组
use: [{
// 加载器为 'raw-loader'
loader: 'raw-loader'
}, {
// 加载器为 'pug-plain-loader'
loader: 'pug-plain-loader'
}]
}]
}, {
// 测试正则表达式
test: /\.(svg)(\?.*)?$/,
// 类型为 'asset/resource'
type: 'asset/resource',
// 生成器选项
generator: {
// 文件名格式
filename: 'img/[name].[hash:8][ext]'
}
}, {
// 测试正则表达式
test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
// 类型为 'asset'
type: 'asset',
// 生成器选项
generator: {
// 文件名格式
filename: 'img/[name].[hash:8][ext]'
}
}, {
// 测试正则表达式
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
// 类型为 'asset'
type: 'asset',
// 生成器选项
generator: {
// 文件名格式
filename: 'media/[name].[hash:8][ext]'
}
}, {
// 测试正则表达式
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
// 类型为 'asset'
type: 'asset',
// 生成器选项
generator: {
// 文件名格式
filename: 'fonts/[name].[hash:8][ext]'
}
}, {
// 测试正则表达式
test: /\.css$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}, {
// 资源查询
resourceQuery: /\?vue/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
},
{
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}, {
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}]
}, {
// 测试正则表达式
test: /\.p(ost)?css$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}, {
// 资源查询
resourceQuery: /\?vue/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}, {
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}, {
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}]
}]
}, {
// 测试正则表达式
test: /\.scss$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}, {
// 资源查询
resourceQuery: /\?vue/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}, {
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
options: {
sourceMap: false
}
}]
}]
}, {
// 测试正则表达式
test: /\.sass$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// Sass 选项
sassOptions: {
// 缩进语法为 true
indentedSyntax: true
}
}
}]
}, {
// 资源查询
resourceQuery: /\?vue/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// Sass 选项
sassOptions: {
// 缩进语法为 true
indentedSyntax: true
}
}
}]
}, {
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// Sass 选项
sassOptions: {
// 缩进语法为 true
indentedSyntax: true
}
}
}]
}, {
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'sass-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// Sass 选项
sassOptions: {
// 缩进语法为 true
indentedSyntax: true
}
}
}]
}]
}, {
// 测试正则表达式
test: /\.less$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
postcssOptions: {
plugins: [function () { }]
}
}
}, {
loader: 'C:/cliproject/node_modules/less-loader/dist/cjs.js',
options: {
sourceMap: false
}
}]
}, {
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/less-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}, {
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/less-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}]
}, {
// 测试正则表达式
test: /\.styl(us)?$/,
// 一个或多个选项
oneOf: [{
// 资源查询
resourceQuery: /module/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2,
// 模块选项
modules: {
// 本地标识名格式
localIdentName: '[name]_[local]_[hash:base64:5]',
// 自动为 true
auto: () => true
}
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
loader: 'stylus-loader',
options: {
sourceMap: false
}
}]
}, {
// 测试正则表达式
test: /\.module\.\w+$/,
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'stylus-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}, {
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/vue-style-loader/index.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 阴影模式为 false
shadowMode: false
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/css-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// 导入加载器数量为 2
importLoaders: 2
}
}, {
// 加载器路径
loader: 'C:/cliproject/node_modules/postcss-loader/dist/cjs.js',
// 选项对象
options: {
// 源映射为 false
sourceMap: false,
// PostCSS 选项
postcssOptions: {
// 插件数组
plugins: [function () { }]
}
}
}, {
// 加载器路径
loader: 'stylus-loader',
// 选项对象
options: {
// 源映射为 false
sourceMap: false
}
}]
}]
}, {
// 测试正则表达式
test: /\.m?jsx?$/,
// 排除函数
exclude: [function () { }],
// 使用的加载器数组
use: [{
// 加载器路径
loader: 'C:/cliproject/node_modules/babel-loader/lib/index.js',
// 选项对象
options: {
// 缓存压缩为 false
cacheCompression: false,
// 缓存目录
cacheDirectory: 'C:/cliproject/node_modules/.cache/babel-loader',
// 缓存标识符
cacheIdentifier: '6f38d6da'
}
}]
}]
}
Vue CLI 项目中的 vue.config.js 文件是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。以下是你提到的选项的详细讲解：
在 Vue CLI 3.3 以前，这个选项用于设置应用部署的基础路径。在 3.3 及以后的版本中，应使用 publicPath。
string'/'这是应用会部署到的基础路径。
string'dist'当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
string''放置生成的静态资源 (js、css、img、fonts) 的目录。
string'index.html'指定生成的 index.html 文件的输出路径。
booleantrue文件名哈希是否启用。
Objectundefined用于多页面配置。
boolean | 'warning' | 'default' | 'error'true是否在保存的时候使用 eslint-loader 进行检查。
booleanfalse是否使用包含运行时编译器的 Vue 构建版本。
Array<string | RegExp>[]需要被 Babel 转译的依赖。
booleantrue生产环境是否生成 sourceMap 文件。
string设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
booleanfalse在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
Object | Function通过这个选项可以调整 webpack 的内部配置。
Function允许对内部的 webpack 配置进行更细粒度的修改。
booleanfalse是否开启 CSS modules。
booleantrue是否需要文件扩展名
boolean | Objecttrue是否将组件中的 CSS 提取至一个独立的 CSS 文件中。
booleanfalse是否为 CSS 开启 source map。
Object传递给 CSS 相关 loader 的选项。
Object用于配置 webpack dev server 的行为。
string | Object用于设置代理。
boolean | numberrequire('os').cpus().length > 1是否以并行方式运行。
Object用于配置 PWA 插件的选项。
Object用于设置第三方插件的选项。
Subresource Integrity (SRI) 是一种安全特性，用于防止攻击者通过网络劫持方式篡改网站资源。它通过使用一个额外的基于内容的完整性描述符（hash）来验证资源（如脚本或样式表）的完整性。这样，浏览器就可以在加载资源之前检查它是否被篡改。
当你为一个资源（比如 JavaScript、CSS 文件）使用 SRI，该资源的完整性描述符（通常是通过算法（如 SHA-256、SHA-384 或 SHA-512）生成的哈希值）会被添加到资源的 <script> 或 <link> 标签中。例如：
<!-- 对于 CSS 文件 -->
<link rel="stylesheet" href="https://example.com/example.css"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous">
<!-- 对于 JavaScript 文件 -->
<script src="https://example.com/example.js"
integrity="sha384-TvqUjzB6DPOthvD+Kypj/dS1N3R+SlbNWJF0DsAJXM5A5L0m3ytpW1Ud1esFIt5L"
crossorigin="anonymous"></script>
在这些例子中，integrity 属性包含了用于验证文件内容的哈希值。
当浏览器试图加载带有 integrity 属性的资源时，它会首先下载资源，并生成其哈希值。然后，浏览器将检查生成的哈希值与 integrity 属性中指定的哈希值是否匹配：
如果不匹配，浏览器会阻止资源的加载，并在控制台中报告错误。
为什么需要 SRI？
防篡改：使用 SRI 可以确保从 CDN 或其他第三方加载的资源没有被篡改。这对于所有网站都是非常重要的，特别是对于那些涉及金融交易或传输敏感信息的网站。
增强安全性：SRI 是一层额外的安全性，即使是在 HTTPS 的基础上也是如此。
使用与配置
在 Vue CLI 项目中，你可以在 vue.config.js 文件中使用 integrity 选项来开启 SRI。例如：
module.exports = {
integrity: true
};
这将为所有生成的 JavaScript 和 CSS 文件添加 SRI 哈希。
注意：开启 SRI 后，一定要确保你所有的外部资源都是可信的，并且哈希值是正确的。不然，不匹配的资源将无法被加载，从而可能破坏你的应用功能。
crossorigin 是一个 HTML 标签属性，通常用在 <script>, <img>, 或 <link> 等标签中，以配置某个资源应如何与跨域的 HTTP 请求（CORS）进行交互。在 Vue CLI 项目的 vue.config.js 配置文件中，crossorigin 选项用于设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
这个选项通常接受以下几种值：
"anonymous"：CORS 请求将设置 Origin HTTP 头字段，但不发送凭证（如 cookie 等）。
"use-credentials"：CORS 请求将设置 Origin HTTP 头字段，并且会携带凭证。
如果不设置或者设为 undefined，则不会添加任何 crossorigin 属性，这也是默认行为。
使用场景
优化字体加载：如果你的字体文件是从第三方来源或者其他域名加载的，设置 crossorigin 可以优化字体的加载行为。
安全性：使用 Subresource Integrity (SRI) 检查资源文件的合法性时，通常需要设置一个合适的 crossorigin 属性值。
数据获取：在某些情况下，你可能需要从其他域名获取资源，例如图片或脚本。使用 crossorigin 属性可以定义如何处理这些跨域请求。
示例
在 vue.config.js 文件中设置：
module.exports = {
crossorigin: 'anonymous'
};
这样，生成的 HTML 文件中所有的 <script> 和 <link rel="stylesheet"> 标签将自动添加 crossorigin="anonymous" 属性。
注意
设置不当的 crossorigin 属性可能会导致一系列问题，如资源加载失败、安全问题等，所以需要根据具体场景谨慎设置。
vue.config.js 文件是一个用于自定义 Vue CLI 项目配置的文件。其中的 configureWebpack 选项是一个非常有用的工具，用于调整内部的 Webpack 配置。这允许你在不必完全 eject（弹出）Webpack 配置的情况下，进行项目级别的高级定制。
你可以通过两种方式使用 configureWebpack：
1. 对象形式
如果 configureWebpack 是一个对象，那么它将会被合并到最终的 Webpack 配置中。
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
// 你的插件
],
resolve: {
alias: {
'@assets': '@/assets',
'@components': '@/components',
// 更多别名
}
}
// 更多配置
}
}
2. 函数形式
如果 configureWebpack 是一个函数，它将接收一个包含已解析配置的参数对象。你可以直接更改这个对象，或者返回一个对象以与默认配置合并。
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// 开发环境下的配置
config.devtool = 'source-map'
} else {
// 生产环境下的配置
// ...
}
// 直接更改配置对象
}
}
常用配置项：
示例：添加一个 Webpack 插件
const MyWebpackPlugin = require('./MyWebpackPlugin')
module.exports = {
configureWebpack: {
plugins: [
new MyWebpackPlugin()
]
}
}
示例：修改 Loader 选项
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
}
}
webpack-merge 是一个非常有用的库，用于合并多个 Webpack 配置对象。这在你需要有多个共享相同设置的 Webpack 配置文件（例如，开发和生产环境）时非常有用。
使用 webpack-merge 可以让你更容易地组织和维护代码，因为你可以创建多个配置片段并根据需要合并它们。
安装
要开始使用 webpack-merge，你首先需要安装它：
npm install --save-dev webpack-merge
或者
yarn add --dev webpack-merge
基础用法
假设你有一个通用的 Webpack 配置文件 webpack.common.js：
// webpack.common.js
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
},
};
然后，你想为开发和生产环境分别有一些特定的配置。你可以创建两个额外的文件：webpack.dev.js 和 webpack.prod.js。
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
});
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
// 其他生产环境特定的配置
});
在这些文件中，我们使用 webpack-merge 的 merge 函数来合并通用配置（webpack.common.js）和环境特定的配置（webpack.dev.js 或 webpack.prod.js）。
高级功能
除了基本的合并之外，webpack-merge 还提供了一些高级合并策略。
合并规则
自定义数组合并
如果你不想替换数组而是想合并它，你可以使用 mergeWithRules 方法：
const { mergeWithRules } = require('webpack-merge');
module.exports = mergeWithRules({
module: {
rules: {
test: 'match',
use: 'replace',
},
},
})(commonConfig, additionalConfig);
以上是 webpack-merge 的基础和一些高级用法。通过灵活地合并多个配置对象，这个库让 Webpack 配置变得更加模块化和可维护。
webpack-chain 是一个用于修改 webpack 配置的链式 API 库。该库提供了一种更精细、更直观的方式来更新 webpack 配置，比直接操作原始的 webpack 配置对象更为安全和可读。
webpack-chain 尤其在多人或多配置环境下很有用，因为它可以更清晰地展示配置是如何被修改的。这在使用诸如 vue-cli 或 create-react-app 这样的脚手架工具时特别有用，因为这些工具通常会生成一个预设的 webpack 配置，你可能需要按照项目的具体需求来定制这些配置。
要特点：
链式 API：你可以使用易于理解的链式调用来配置 webpack。
安全性：通过使用 API，而不是直接操作配置对象，可以减少出错的可能性。
可组合性：可以将配置逻辑分解为可重用的函数，这些函数可以在多个项目或环境中重用。
基本用法：
先安装 webpack-chain：
npm install --save-dev webpack-chain
然后，你可以这样使用：
const Config = require('webpack-chain');
const config = new Config();
config // 开发模式
.mode('development')
.entry('index') // 入口文件
.add('./src/index.js')
.end()
.output // 输出
.path('dist')
.filename('[name].bundle.js');
// 使用链式 API 定义 loader
config.module
.rule('lint')
.test(/\.js$/)
.pre()
.use('eslint')
.loader('eslint-loader')
.options({
rules: {
semi: 'off'
}
});
// 最后，生成最终的配置
const webpackConfig = config.toConfig();
上面的例子中使用了链式 API 来定义 webpack 的各个配置项，例如模式（mode）、入口（entry）、输出（output）等。
webpack-chain 提供了一系列用于修改 webpack 配置的链式 API。下面是一些主要的属性和方法：
Config
这是一个用于创建新的配置对象的类。
new Config(): 初始化一个新的 webpack 配置。基础设置
config.mode(mode): 设置构建模式（development 或 production）。config.entry(name): 设置入口起点。config.output: 用于配置输出选项。解析
config.resolve: 用于配置模块解析的设置。config.resolve.alias.set(alias, path): 设置一个路径别名。模块和 Loader
config.module: 配置构建模块。config.module.rule(name): 添加一个 loader 规则。config.module.rule(name).use(name): 为规则添加一个 loader。插件
config.plugin(name): 添加一个插件。DevServer
config.devServer: 配置 webpack-dev-server 设置。其他
config.optimization: 配置优化设置。config.node: 配置 Node.js 全局变量或模块。实用方法
config.toConfig(): 返回一个原始的 webpack 配置对象。config.merge(obj): 合并一个 webpack 配置对象到当前链式配置。config.extend(extensions): 使用一个扩展来扩展当前配置。下面是一个例子，展示了如何使用其中的一些属性和方法：
const Config = require('webpack-chain');
const config = new Config();
// 设置模式
config.mode('production');
// 设置入口
config.entry('main')
.add('./src/main.js')
.end();
// 设置输出
config.output
.path('/dist')
.filename('[name].js');
// 配置模块和 Loader
config.module
.rule('javascript')
.test(/\.js$/)
.use('babel')
.loader('babel-loader');
// 添加插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
config.plugin('html')
.use(HtmlWebpackPlugin, [{ template: './src/index.html' }]);
// DevServer
config.devServer
.port(8080);
// 获取最终的 webpack 配置
const webpackConfig = config.toConfig();
在 webpack-chain 的链式 API 中，.end() 方法用于返回到链的上一个级别。这样，你可以继续对上一级别的配置进行链式操作。它通常用于退出当前的链式方法调用，以便你可以进一步配置其他选项。
这是非常有用的，因为 webpack 配置通常涉及多层嵌套的对象和数组。webpack-chain 的链式 API 允许你深入这些嵌套结构，而 .end() 方法则允许你安全地“返回”到之前的层级。
例子
在以下例子中，.end() 被用来从一个 loader 的配置返回到规则的配置，然后再从规则的配置返回到模块的配置。
const Config = require('webpack-chain');
const config = new Config();
config.module // 进入 module 配置
.rule('js') // 进入 rule 配置
.test(/\.js$/)
.use('babel-loader') // 进入 loader 配置
.loader('babel-loader')
.options({
presets: ['@babel/preset-env']
})
.end() // 返回到 rule 配置
.include
.add('/src')
.end() // 返回到 module 配置
.rule('css') // 另一个 rule 配置
.test(/\.css$/)
.use('style-loader')
.loader('style-loader');
在这个例子中：
module 的配置。js 的规则，并设置了它的 test 值。use 配置，并设置了 loader 和它的选项。.end() 方法，我们返回到了 js 规则。include 值。.end() 方法，我们返回到了 module 的配置。通过这种方式，.end() 方法使得在复杂的配置结构中进行导航变得更加简单和直观。
在 Vue.js 项目中，vue.config.js 是一个可选的配置文件，你可以在项目的根目录中创建它。通过这个文件，你可以自定义 Vue CLI 项目的各种配置选项，包括 Webpack 配置。
chainWebpack 是 vue.config.js 中的一个高级选项，它允许你通过 Webpack Chain 这个库的 API 对内部的 Webpack 配置进行更细致的修改。
Webpack Chain 的设计目的是为了让修改配置更加可预测和更加简单。它通过链式 API 提供了一种途径来扩展基础配置。
下面是一个 vue.config.js 中使用 chainWebpack 的简单示例：
module.exports = {
chainWebpack: config => {
// 修改 entry 入口
config
.entry('app')
.clear()
.add('./src/main.js')
// 添加一个新的 loader
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改选项
return options
})
// 添加一个插件
config
.plugin('my-plugin')
.use(require.resolve('some-webpack-plugin'), [/* 选项 */])
// 修改 output 配置
config.output
.filename('[name].[hash].js')
}
}
在这个示例中，我们：
vue-loader 进行了一些自定义设置通过 chainWebpack，你可以访问到整个 Webpack 配置的链式 API，这样你就可以非常灵活地进行修改，而不必直接修改复杂的对象结构。
这个功能非常强大，但也很复杂，一定要谨慎使用。当你需要进行高级自定义时，它是一个非常有用的工具。要了解更多关于 Webpack Chain 的详细信息和 API，你可以访问其 GitHub 仓库。