npm run build 的原理是利用 Vue CLI 的构建工具，根据项目中配置的各种规则，将源代码转换成可在浏览器中运行的静态文件。
npm run build 主要做了以下几个操作：
- 读取项目配置：根据项目中的配置文件，如
vue.config.js，读取项目的构建规则，包括输入输出路径、代码转换规则、插件等。 - 分析项目代码：通过 webpack 进行代码分析，包括依赖分析、代码分块、模块化等操作，生成代码依赖树。
- 转换代码：依据 webpack 分析得到的代码结构，将源代码通过 babel 等转换工具进行转换，以满足不同浏览器的不同规范要求。
- 打包代码：将转换后的代码进行压缩和编译，生成多个静态资源文件，如 js、css、图片等。
- 输出静态文件：将打包好的静态资源文件输出到指定的目录，以供浏览器获取和加载。
- 优化打包结果：针对生成的静态资源文件进行优化，主要包括去重、缓存、压缩等操作，提高浏览器加载速度和用户体验。
通过以上步骤，vue run build 将源代码转换成了可在浏览器中运行的静态文件，并进行了一系列的优化和处理，以提高应用的性能和稳定性。
在执行 npm run build 命令时，可以通过 package.json 文件中的 scripts 字段的 build 命令自定义构建脚本，从而实现各种操作。一般来说，npm run build 命令可以做以下操作：
- 清理缓存：在构建之前，清除之前已经生成的构建文件和缓存文件，以保证每次构建的环境干净。
- 编译源代码：使用相应的编译工具，将源代码转换成符合浏览器识别的代码。
- 压缩代码：对编译后的代码进行压缩和优化，减少代码体积，以提高网页加载速度。
- 处理资源文件：如将图片、视频等资源文件进行打包、压缩等操作，以减少网络请求并提高网页加载速度。
- 生成构建结果：将编译和压缩后的代码、资源文件等生成到指定的目录中，以供网页加载使用。
- 提高构建效率：使用一些插件和工具，如 webpack、rollup 等，提高构建效率和性能。
以上操作只是 npm run build 可以做的一些常见操作，具体可以根据项目的需要进行自定义和扩展。
清理缓存的具体操作是根据不同的构建工具进行的，这里以常用的 webpack 为例：
在 Webpack 中，可以通过使用 clean-webpack-plugin 插件来清理构建缓存。在 webpack.config.js 配置文件中添加该插件的配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
// 清除之前的构建文件
new CleanWebpackPlugin(),
// ...
],
// ...
}在执行 npm run build 命令时，Webpack 将会首先清除之前构建的文件和缓存，然后再重新构建新的文件。
除了使用插件清理缓存之外，也可以手动删除构建目录，例如在 package.json 文件中添加 "prebuild": "rm -rf dist" 命令，在执行 npm run build 命令时先删除 dist 目录，然后再进行构建。
自定义 build 构建脚本通常是指在执行 npm run build 命令时，除了默认的构建操作之外，还需要执行一些额外的处理逻辑，例如清理缓存、拷贝文件等操作。
可以在 package.json 文件中的 scripts 字段中自定义一个 build 命令，然后在该命令中添加自己的构建脚本。例如：
{
"scripts": {
"build": "rm -rf dist && vue-cli-service build && cp -r static/ dist/"
}
}在该例子中，我们通过 rm -rf dist 命令清理构建目录，然后执行 vue-cli-service build 进行构建，最后使用 cp -r static/ dist/ 将 static 目录下的静态资源文件拷贝到构建目录中。
如果您使用的是其他的构建工具或框架，也可以在相应的配置文件中添加您需要的构建脚本。例如，在 Webpack 中可以在 webpack.config.js 文件中的 plugins 字段中添加插件，在 Gulp 中可以在 gulpfile.js 文件中自定义任务等。
如果你需要更加高级的定制化，可以创建一个 build.js 文件，然后在 package.json 文件中的 scripts 字段中添加一个自定义的构建命令。
- 在根目录下创建一个
build.js文件。 - 把你需要额外执行的操作写入
build.js文件中。比如：
const { exec } = require('child_process')
exec('rm -rf dist', (err, stdout, stderr) => {
if (err) {
console.error('执行命令出错：', err)
return
}
console.log('清理构建目录')
// 执行vue-cli-service build 命令
exec('vue-cli-service build', (err, stdout, stderr) => {
if (err) {
console.error('执行命令出错：', err)
return
}
console.log('构建成功')
})
})- 在
package.json文件中的scripts字段中添加一个自定义的构建命令。比如：
{
"scripts": {
"build:custom": "node build.js"
}
}- 在终端中执行
npm run build:custom命令即可执行自定义的构建操作。
在这个例子中，我们在 build.js 文件中通过 exec 方法来执行系统命令，实现了清除构建目录和执行 vue-cli-service build 命令的功能。当然，你也可以在 build.js 文件中直接使用 Webpack、Gulp 等构建工具执行构建任务。
除了一些基本的使用和自定义构建脚本，我们还可以深入了解一些更深层次的原理，如：
- Webpack：Vue CLI 依赖 Webpack 进行打包构建，深入了解 Webpack 可以帮助我们更好的理解 Vue CLI 的打包构建过程。
- Babel：Vue CLI 默认集成了 Babel，可以使我们在代码中使用最新的 JavaScript 语法和更好的开发体验，进一步了解 Babel 可以帮助我们完成自定义配置、优化打包结果等操作。
- ESLint：Vue CLI 默认集成了 ESLint，帮助我们在开发过程中遵循一致的代码风格和规范，进一步了解 ESLint 可以帮助我们更好的配置规则，提高代码质量。
- Vue Router 和 Vuex：Vue CLI 也提供了集成 Vue Router 和 Vuex 的选项，深入了解这两个库可以帮助我们更好的理解 Vue 单页面应用的开发方式。
- 浏览器缓存：在上线后，我们需要考虑如何利用浏览器缓存来减小请求次数，优化应用性能。可以深入了解浏览器缓存原理、缓存策略等，从而更好的优化应用。
总之，Vue CLI 并不只是提供了一个简单的构建工具，更是一个底层的框架集成和应用开发工具。深入了解这些底层原理可以帮助我们更好的使用和扩展 Vue CLI。
