当前位置：首页 > news >正文

若依前端vue基本函数介绍

news 2025/9/20 6:42:20

gzh , B站同名有对应的源码解析视频

1 require()

require() 是 Node.js 环境中的内置函数，用于在当前模块中引入其他模块（文件、第三方库等），是 CommonJS 模块规范的核心函数之一。

基本作用

加载并执行指定的模块文件
返回该模块导出的内容（通过 module.exports 或 exports 定义）

使用场景

引入内置模块（Node.js 自带的模块）：
const path = require(‘path’); // 引入路径处理模块
const fs = require(‘fs’); // 引入文件系统模块
引入自定义模块（项目中的本地文件）：
// 引入同目录下的 utils.js 文件
const utils = require(‘./utils.js’);
// 可省略 .js 后缀
const api = require(‘./api’);
引入第三方模块（通过 npm 安装的依赖）：
// 引入 npm 安装的 lodash 库
const _ = require(‘lodash’);
// 引入本文中提到的 compression-webpack-plugin 插件
const CompressionPlugin = require(‘compression-webpack-plugin’);

注意点

require() 是 Node.js 环境特有的函数，浏览器环境中不能直接使用（浏览器端通常用 ES6 的 import 语法）。
在 Vue CLI 项目中，vue.config.js 运行在 Node.js 环境中（作为构建脚本），因此可以使用 require()。
模块引入后会被缓存，多次 require 同一模块不会重复执行，只会返回第一次的结果。

简单说，require() 是 Node.js 中用于模块间依赖管理的核心函数，类似于浏览器端的 import，但遵循 CommonJS 规范。

2 修改项目端口

const port = process.env.port || process.env.npm_config_port || 80 中，只有 process.env.port 可能从 .env 文件获取，process.env.npm_config_port 完全不来自 .env 文件，二者来源完全不同。下面逐个拆解：

process.env.port：可能从 .env 文件获取，也可能从「命令行临时设置」获取

port 是一个普通环境变量（非 Vue CLI 约定的 VUE_APP_ 前缀变量），它的来源有两个：

来源1：.env 系列文件（需手动配置）

如果你在 .env/.env.development 等文件中显式定义了 port 变量，process.env.port 就能读取到该值：

# 示例：在 .env.development 中配置
port=8081  # 注意：无需 VUE_APP_ 前缀，直接写 port

此时执行 npm run serve，process.env.port 会优先读取到 8081。

来源2：命令行临时设置（优先级高于 .env 文件）

如果不在 .env 文件中配置 port，也可以在执行启动命令时临时设置 port 变量，此时 process.env.port 会读取这个临时值（优先级高于 .env 文件的配置）：

# Windows（cmd 终端）
set port=8082 && npm run serve# Mac/Linux 终端
port=8082 npm run serve

执行后，process.env.port 会获取到 8082，覆盖 .env 文件中的 port（如果有的话）。

process.env.npm_config_port：完全不来自 .env 文件，仅来自「npm 命令参数」

npm_config_xxx 是 npm 工具自带的环境变量，npm_config_port 专门对应「执行 npm run serve 时通过 --port 参数传递的值」，与 .env 文件毫无关系。

具体获取方式：

在执行启动命令时，通过 --port 参数指定端口，npm 会自动将该参数值注入到 process.env.npm_config_port 中：

# 执行命令时追加 --port 参数
npm run serve --port 8083

此时 process.env.npm_config_port 会获取到 8083，且该值不会受 .env 文件影响（即使 .env 中配置了 port，也不干扰 npm_config_port）。

最终优先级总结（从高到低）

const port = process.env.port || process.env.npm_config_port || 80 的取值逻辑是「左侧存在则用左侧，不存在则用右侧」，完整优先级顺序为：

命令行临时设置的 port（如 port=8082 npm run serve）→ 赋值给 process.env.port；
.env 文件中配置的 port（如 .env.development 中的 port=8081）→ 赋值给 process.env.port（仅当第1步未设置时生效）；
npm 命令参数 --port（如 npm run serve --port 8083）→ 赋值给 process.env.npm_config_port（仅当第1、2步未设置时生效）；
默认值 80（前3步都未设置时生效）。

一句话总结

process.env.port：可能来自 .env 文件或命令行临时设置；
process.env.npm_config_port：仅来自 npm run serve --port xxx 的命令参数，与 .env 无关；
最终端口按「命令行临时设置 > .env 配置 > npm 参数 > 默认80」的顺序确定。

3 module.exports = { … }

在配置文件里面有这个，有什么作用，导出配置对象，供@vue/cli-service读取；

module.exports = { … } 是 Node.js 环境中导出模块的核心语法（遵循 CommonJS 模块规范），在 Vue CLI 项目的 vue.config.js 中，它的作用、内容和使用者都有明确指向，具体拆解如下：

一、module.exports = { … } 里面写什么？

在 vue.config.js 中，module.exports 后面的对象里，只能写 Vue CLI 官方支持的「配置选项」，这些选项是 Vue CLI 为了简化 webpack 等工具的配置而设计的「上层 API」，核心分为 6 大类（对应之前解析的若依项目配置）：

配置类别核心选项示例作用领域

部署与路径配置 publicPath、outputDir、assetsDir 控制项目打包后的路径、资源存放位置
开发服务器配置 devServer（含 port、proxy、open）本地开发时的服务器（端口、跨域代理等）
代码检查与兼容性 lintOnSave、productionSourceMap、transpileDependencies 代码规范检查、SourceMap 控制、依赖转译
CSS 预处理配置 css.loaderOptions（如 Sass/Less 配置）自定义 CSS 预处理器的编译规则
webpack 基础配置 configureWebpack（含 resolve.alias、plugins）直接追加/覆盖 webpack 配置
webpack 链式配置 chainWebpack（如删除插件、修改模块规则）精细调整 webpack 配置（链式操作更灵活）

注意：不能写 Vue CLI 不支持的自定义键（如 myCustomConfig: 123）—— 这些自定义键会被 @vue/cli-service 忽略，无法生效。

二、里面的配置有什么作用？

所有配置的核心作用是「覆盖/扩展 Vue CLI 的默认配置」，最终服务于「开发体验优化」和「生产环境性能优化」，具体体现为 3 个目标：

简化开发流程
比如 devServer.proxy 配置跨域代理，避免开发时手动处理接口跨域；devServer.open 配置启动后自动打开浏览器，减少手动操作。
优化生产打包结果
比如 productionSourceMap: false 关闭生产环境 SourceMap（减小包体积）；configureWebpack.plugins 中添加 CompressionPlugin 实现 gzip 压缩（加快资源加载速度）。
适配项目个性化需求
比如 resolve.alias: { ‘@’: resolve(‘src’) } 配置路径别名（用 @ 代替 src 目录，简化组件/工具的导入）；chainWebpack 中配置 svg-sprite-loader 处理图标（实现 SVG 图标复用）。

三、这些配置让谁读取和使用？

唯一使用者是 @vue/cli-service（Vue CLI 的核心服务模块），整个读取和使用流程是「单向且固定」的，具体步骤如下：

读取时机：执行 npm run serve（开发）或 npm run build（生产）时，@vue/cli-service 会自动扫描项目根目录的 vue.config.js；
解析配置：@vue/cli-service 读取 module.exports 导出的对象，将其中的配置与 Vue CLI 的「默认配置」合并（用户配置优先级高于默认配置，冲突时覆盖默认值）；
转换与执行：@vue/cli-service 将合并后的配置，转换为 webpack、webpack-dev-server 等工具能识别的原生配置：
- 比如 devServer.port: 80 会被转换为 webpack-dev-server 的 port: 80；
- 比如 configureWebpack.plugins 中的 CompressionPlugin 会被注入到 webpack 的插件列表中；
作用于最终流程：转换后的配置被传递给 webpack（负责打包）、webpack-dev-server（负责本地开发服务）等工具，最终实现「开发时的热更新」「生产时的压缩打包」等核心功能。

四、关键补充：为什么必须用 module.exports？

因为 vue.config.js 是运行在 Node.js 环境中的「构建脚本」，而非浏览器环境的「前端代码」：

浏览器环境用 ES6 模块规范（export default { … }）；
Node.js 环境用 CommonJS 模块规范（module.exports = { … }）；

如果在 vue.config.js 中误写为 export default { … }，Node.js 会无法识别（报语法错误），导致 @vue/cli-service 无法读取配置，项目启动/打包失败。

总结

核心问题答案
里面写什么？ Vue CLI 官方支持的配置选项（如 devServer、configureWebpack 等）
配置有什么作用？覆盖/扩展 Vue CLI 默认配置，优化开发体验和生产打包结果
谁读取使用？仅 @vue/cli-service 读取，转换为 webpack 等工具的原生配置后执行
为什么用 module.exports？因为 vue.config.js 运行在 Node.js 环境，遵循 CommonJS 模块规范

5 哪些key

module.exports = { … } 里面的配置就是key value 的形式，key 就是我们学习的东西，也就是可以配置哪些东西，@vue/cli-service这个依赖认识的key。

在 Vue CLI 项目的 vue.config.js 中，module.exports 内的配置 key 均为 Vue CLI 官方定义的标准化选项，每个 key 对应特定的功能领域。以下按「功能分类」详细解读所有核心配置 key（结合你之前提供的若依项目配置，覆盖常用场景）：

一、部署与路径配置（控制打包后文件的位置和访问方式）

这类配置决定项目打包后（npm run build）的文件结构、部署路径，是生产环境部署的核心。

配置 key 类型默认值作用说明示例（若依项目）
publicPath String ‘/’ 项目部署的基础路径（即访问根路径）。生产环境若部署在子目录（如 /admin/），需修改此值。 process.env.NODE_ENV === ‘production’ ? ‘/’ : ‘/’
outputDir String ‘dist’ 生产环境打包输出的目录名称（打包后生成的文件夹），需与 publicPath 匹配。 ‘dist’
assetsDir String ‘’（空）静态资源（JS/CSS/图片/字体）的存放目录（相对于 outputDir），避免资源与 HTML 混放。 ‘static’
indexPath String ‘index.html’ 生成的 index.html 文件路径（相对于 outputDir），一般无需修改。未配置（使用默认值）
filenameHashing Boolean true 打包后静态资源文件名是否添加哈希值（如 app.[hash].js），用于控制浏览器缓存（哈希变化则缓存失效）。未配置（使用默认值 true）

二、开发服务器配置（控制 npm run serve 时的本地开发环境）

这类配置仅作用于开发阶段，优化本地开发体验（如跨域、端口、自动打开浏览器）。

配置 key 类型默认值作用说明示例（若依项目）
devServer Object {} 开发服务器的核心配置，包含端口、代理、浏览器自动打开等子选项。见下方子选项拆解
├─ devServer.host String ‘localhost’ 开发服务器的主机地址。设为 ‘0.0.0.0’ 允许同一局域网的其他设备（如手机）访问。 ‘0.0.0.0’
├─ devServer.port Number 8080 开发服务器的端口号，若端口被占用会自动递增。 port（即从环境变量读取或默认 80）
├─ devServer.open Boolean/String false 启动开发服务器后是否自动打开浏览器。可传具体 URL（如 ‘http://localhost:80’）。 true
├─ devServer.proxy Object/Array undefined 配置接口代理，解决开发环境跨域问题（将前端请求转发到后端服务器）。见下方代理子配置
│ └─ [process.env.VUE_APP_BASE_API] Object - 代理的「标识前缀」（如 /dev-api），匹配该前缀的请求会被转发。 target: ‘http://localhost:8080’（后端地址）
│ ├─ target String - 后端接口的基础地址（目标服务器地址）。 ‘http://localhost:8080’
│ ├─ changeOrigin Boolean false 是否开启跨域代理（模拟请求的 Host 为 target，解决跨域限制）。 true
│ └─ pathRewrite Object - 路径重写：移除请求 URL 中的「代理标识前缀」（如 /dev-api/login → /login）。 [‘^’ + process.env.VUE_APP_BASE_API]: ‘’
└─ devServer.disableHostCheck Boolean false 关闭主机检查（避免本地开发时因 host 不匹配导致的「Invalid Host header」错误）。 true

三、代码检查与兼容性配置（控制代码规范和浏览器兼容）

这类配置保障代码质量（ESLint 检查）和项目兼容性（适配旧浏览器）。

配置 key 类型默认值作用说明示例（若依项目）
lintOnSave Boolean/String true 是否在开发时开启 ESLint 代码规范检查：
- true：保存时检查，警告不阻塞编译；
- ‘error’：错误时阻塞编译；
- false：关闭检查。 process.env.NODE_ENV === ‘development’（仅开发时开启）
productionSourceMap Boolean true 生产环境是否生成 SourceMap（.map 文件）。
- true：便于调试，但暴露源码且增大包体积；
- false：生产环境推荐关闭，优化性能。Source Map（源代码映射）是一种用于关联「压缩/混淆后的生产环境代码」与「原始开发代码」的映射文件（通常以 .map 为后缀） false（生产环境关闭）
transpileDependencies Array/String [] 需要用 Babel 转译的第三方依赖（默认仅转译 node_modules 外的文件）。若依赖用 ES6+ 语法且未转译（如 quill），需添加至此。 [‘quill’]（转译富文本编辑器 quill）

四、CSS 相关配置（控制 CSS 预处理器和样式处理）

这类配置用于自定义 CSS 编译规则（如 Sass/Less 全局变量、提取 CSS 文件等）。

配置 key 类型默认值作用说明示例（若依项目）
css Object {} CSS 处理的总配置，包含提取、SourceMap、预处理器选项。见下方子选项拆解
├─ css.extract Boolean/Object process.env.NODE_ENV === ‘production’ 是否将 CSS 提取到单独文件（而非内嵌在 JS 中）：
- 开发环境默认 false（便于热更新）；
- 生产环境默认 true（优化加载）。未配置（使用默认值）
├─ css.sourceMap Boolean false 是否生成 CSS 的 SourceMap（便于调试样式来源）。未配置（使用默认值 false）
└─ css.loaderOptions Object {} 向 CSS 预处理器（如 Sass/Less/Stylus）传递额外选项（如全局变量、加载路径）。见下方预处理器子配置
└─ css.loaderOptions.sass Object - Sass 预处理器的配置，如编译格式、全局导入变量。 sassOptions: { outputStyle: “expanded” }（展开式编译，非压缩）

五、Webpack 基础配置（直接修改 Webpack 配置）

这类配置用于「追加/覆盖」Webpack 原生配置，适合简单场景（如添加别名、插件）。

配置 key 类型默认值作用说明示例（若依项目）
configureWebpack Object/Function {} 直接修改 Webpack 配置：
- 传 Object：与默认配置合并（冲突时覆盖默认）；
- 传 Function：接收 config 参数，可动态修改配置。见下方子选项拆解
├─ configureWebpack.name String - 配置 Webpack 项目名称（用于调试信息，如控制台输出）。 name（即从环境变量读取的网页标题）
├─ configureWebpack.resolve Object - Webpack 的模块解析配置（如路径别名、扩展名）。见下方解析子配置
│ └─ resolve.alias Object - 配置路径别名（简化文件导入，如用 @ 代替 src 目录）。 ‘@’: resolve(‘src’)
└─ configureWebpack.plugins Array - 向 Webpack 插件列表中添加自定义插件（如压缩、分析插件）。 new CompressionPlugin(…)（gzip 压缩插件）

六、Webpack 链式配置（精细调整 Webpack 配置）

chainWebpack 是 Vue CLI 推荐的「链式操作 Webpack 配置」的方式，比 configureWebpack 更灵活（支持删除、修改、新增 Webpack 规则/插件）。

配置 key 类型默认值作用说明示例（若依项目）
chainWebpack Function - 接收 config 参数（Webpack 配置的链式对象），通过链式 API 精细调整配置：
- 删除插件：config.plugins.delete(‘插件名’)；
- 修改模块规则：config.module.rule(‘规则名’).use(‘loader’).options(…)。见下方核心操作示例
├─ 移除预加载插件 - - 删除 preload/prefetch 插件（减少不必要的资源预加载，优化首屏加载）。 config.plugins.delete(‘preload’); config.plugins.delete(‘prefetch’)
├─ 配置 SVG 处理 - - 单独处理图标 SVG 文件（用 svg-sprite-loader 生成雪碧图，避免重复加载）。见下方 SVG 配置示例
│ └─ 排除图标目录 - - 让默认 SVG 规则排除 src/assets/icons 目录（避免冲突）。 config.module.rule(‘svg’).exclude.add(resolve(‘src/assets/icons’))
│ └─ 新增图标规则 - - 为 src/assets/icons 目录的 SVG 配置 svg-sprite-loader。 config.module.rule(‘icons’).test(/.svg $KaTeX parse error: Expected '}', got 'EOF' at end of input: …runtime\..*\.js$ / }])
└─ 代码分割 - - 拆分第三方库（如 element-ui）和公共组件（如 src/components），优化缓存。 config.optimization.splitChunks({ chunks: ‘all’, cacheGroups: { … } })

七、其他常用配置（多页面、PWA 等）

以下配置在若依项目中未体现，但属于高频使用场景：

配置 key 类型默认值作用说明示例
pages Object undefined 配置多页面应用（默认是单页面 SPA）。每个页面需指定 entry（入口）、template（模板）、filename（输出名）。 { index: { entry: ‘src/main.js’, template: ‘public/index.html’ }, admin: { entry: ‘src/admin.js’, template: ‘public/admin.html’ } }
pluginOptions Object {} 向第三方插件传递选项（如 vue-cli-plugin-electron-builder 等）。 { electronBuilder: { builderOptions: { appId: ‘com.example.app’ } } }

核心总结

配置 key 的约束：所有 key 均为 Vue CLI 官方定义，不可自定义（自定义 key 会被忽略）；
作用优先级：用户配置（vue.config.js） > Vue CLI 默认配置；
使用者：所有配置仅被 @vue/cli-service 读取，转换为 Webpack/Webpack-dev-server 原生配置后执行；
学习路径：若需扩展配置，需参考 Vue CLI 官方配置文档，避免使用未支持的 key。

通过这些配置 key，可覆盖从「开发调试」到「生产部署」的全流程需求，无需手动编写复杂的 Webpack 配置文件。

6 chainWebpack

下面逐行解析 chainWebpack(config) 配置的代码含义、整体作用、调用方及开发者使用方式：

一、整体作用与调用方

作用：通过「链式 API」精细调整 Webpack 配置（比 configureWebpack 更灵活，支持删除/修改/新增规则），最终优化项目的构建结果和性能。
调用方：由 @vue/cli-service 在项目启动（npm run serve）或打包（npm run build）时自动调用，解析后转换为 Webpack 原生配置。
开发者使用方式：无需手动调用，配置写在 vue.config.js 中即可自动生效，修改后需重启服务。

二、逐行代码解析

移除预加载插件

config.plugins.delete(‘preload’) // 移除 preload 插件
config.plugins.delete(‘prefetch’) // 移除 prefetch 插件

含义：
- preload 插件：预加载当前页面「一定会用到」的资源（如主 JS/CSS）。
- prefetch 插件：预加载当前页面「可能会用到」的资源（如路由懒加载的组件）。
作用：删除这两个插件，避免浏览器在首屏加载时预加载过多资源，优化首屏加载速度（尤其适用于大型项目，减少不必要的网络请求）。

配置 SVG 图标处理规则

// 第一步：让默认 SVG 规则排除图标目录
config.module
.rule(‘svg’) // 匹配 Webpack 中默认处理 SVG 的规则
.exclude.add(resolve(‘src/assets/icons’)) // 排除 src/assets/icons 目录（不使用默认规则处理）
.end() // 结束当前链式调用

// 第二步：为图标目录单独配置 svg-sprite-loader
config.module
.rule(‘icons’) // 新增一个名为 ‘icons’ 的规则
.test(/.svg$/) // 匹配 .svg 文件
.include.add(resolve(‘src/assets/icons’)) // 仅处理 src/assets/icons 目录下的 SVG
.end() // 结束 include 配置
.use(‘svg-sprite-loader’) // 使用 svg-sprite-loader 处理
.loader(‘svg-sprite-loader’) // 指定 loader
.options({
symbolId: ‘icon-[name]’ // 生成的 SVG 标识格式：icon-文件名（如 icon-user.svg → symbolId 为 icon-user）
})
.end() // 结束 loader 配置

含义：
覆盖 Webpack 对 SVG 的默认处理方式，让 src/assets/icons 目录下的 SVG 图标通过 svg-sprite-loader 处理，生成「SVG 雪碧图」。
作用：
- 实现 SVG 图标复用（无需重复加载），减少网络请求。
- 方便在项目中通过直接引用图标。

生产环境专属优化（非开发环境时生效）

config.when(process.env.NODE_ENV !== ‘development’, config => {
// 仅在生产环境（或测试/预发布环境）执行以下配置

3.1 内联 runtime 代码

config.plugin('ScriptExtHtmlWebpackPlugin') // 新增 ScriptExtHtmlWebpackPlugin 插件.after('html') // 在 html-webpack-plugin 之后执行.use('script-ext-html-webpack-plugin', [{inline: /runtime\..*\.js$/ // 将 runtime.xxx.js 内联到 index.html 中（不生成单独文件）}]).end()

含义：runtime.js 是 Webpack 生成的「运行时代码」（记录模块依赖关系），体积很小。通过插件将其「内联」到 index.html 中。
作用：减少一次 HTTP 请求（无需单独加载 runtime.js），优化首屏加载速度。

3.2 代码分割配置

config.optimization.splitChunks({ // 配置 Webpack 代码分割规则chunks: 'all', // 对所有类型的代码块（同步/异步）进行分割cacheGroups: { // 缓存组：按规则将代码分割为不同的 chunk（文件）// 第一组：第三方库（node_modules 中的依赖）libs: {name: 'chunk-libs', // 分割后的文件名前缀test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 目录下的文件priority: 10, // 优先级（数字越大越优先）chunks: 'initial' // 仅分割初始加载的第三方库},// 第二组：element-ui 单独分割（大型 UI 库单独打包）elementUI: {name: 'chunk-elementUI', // 文件名前缀test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // 匹配 element-ui 相关文件（兼容 cnpm 安装的包）priority: 20, // 优先级高于 libs（确保 element-ui 不被分到 libs 中）},// 第三组：公共组件（项目内复用的组件）commons: {name: 'chunk-commons', // 文件名前缀test: resolve('src/components'), // 匹配 src/components 目录（自定义组件）minChunks: 3, // 至少被 3 个地方引用才会被分割priority: 5, // 优先级低于前两组reuseExistingChunk: true // 如果该模块已被分割过，则复用已有 chunk（避免重复打包）}}
})

含义：将代码按「第三方库」「大型 UI 库」「公共组件」分割为不同文件。
作用：
- 实现「按需加载」和「缓存优化」（如第三方库更新频率低，用户首次加载后会缓存，后续无需重新加载）。
- 减小单个文件体积，提高并行加载效率。

3.3 单独提取 runtime 代码

config.optimization.runtimeChunk('single') // 将运行时代码提取为单独的 chunk（runtime.js）

含义：Webpack 的运行时代码（记录模块映射关系）单独打包为 runtime.js（配合前面的内联配置，最终会被内联到 HTML 中）。
作用：避免因其他代码变化导致运行时代码变化，优化缓存（仅当模块依赖关系变化时，runtime.js 才会变化）。

三、总结

核心作用：
- 移除不必要的预加载插件，优化首屏性能；
- 定制 SVG 图标处理规则，实现图标高效复用；
- 生产环境下分割代码、内联小文件，优化加载速度和缓存策略。
开发者使用方式：
- 无需手动调用，配置自动生效；
- 若需调整 SVG 图标目录，修改 resolve(‘src/assets/icons’) 为实际路径；
- 若需新增代码分割规则，在 cacheGroups 中添加新配置（如单独分割 echarts 等大型库）。
效果体现：
- 开发时：可通过引用 src/assets/icons 目录下的 SVG 图标；
- 生产环境：打包后会生成 chunk-libs.js、chunk-elementUI.js 等分割文件，runtime 代码内联到 HTML 中，首屏加载更快。

7 自己总结

配置的核心作用是「覆盖/扩展 Vue CLI 的默认配置」

也就是自定义@vue/cli-service这个依赖里面的配置，自定义配置，但是这个自定义的配置的key 必须是人家依赖认识的，所以我们学习的东西应该是@vue/cli-service这个依赖人家认识哪些key ,

4 process.env.

这个是环境对象，里面有很多的属性，有的属性是从.env 里面拿的，有的是自带的，如果是从.env 里面拿到的，那么对应的值，就是从.env 里面拿的，如果是自带的属性，那么值就是第三方依赖赋予的。

process.env.NODE_ENV 的值是 Vue CLI 自动注入的环境标识，用于区分当前项目运行的环境（开发/生产/测试等），其值的修改方式有两种，具体取决于你是否需要自定义环境：

默认环境：无需手动修改，Vue CLI 自动赋值

Vue CLI 会根据执行的命令自动设置 NODE_ENV 的值，无需手动配置：

执行 npm run serve（开发环境）→ process.env.NODE_ENV = ‘development’
执行 npm run build（生产环境）→ process.env.NODE_ENV = ‘production’
执行 npm run test（测试环境）→ process.env.NODE_ENV = ‘test’

这种情况下，NODE_ENV 的值由 Vue CLI 内部管理，直接使用即可（如用于条件判断不同环境的逻辑）。

自定义环境：通过 .env 文件覆盖默认值

如果需要在自定义环境（如预发布环境 staging）中修改 NODE_ENV 的值，需通过 .env 系列文件手动配置，步骤如下：

示例：创建预发布环境并修改 NODE_ENV

创建自定义环境文件
在项目根目录创建 .env.staging 文件，添加 NODE_ENV 配置：
# .env.staging（预发布环境）
NODE_ENV=staging # 自定义 NODE_ENV 值为 ‘staging’
VUE_APP_TITLE=预发布环境 # 其他自定义变量
通过 --mode 命令指定环境
执行打包命令时，用 --mode staging 关联上述文件：
npm run build --mode staging
此时，process.env.NODE_ENV 的值会被覆盖为 ‘staging’。

注意事项

NODE_ENV 的特殊作用：它不仅是环境标识，还会影响 Webpack 的内置优化（如 production 模式会自动启用代码压缩、Tree-Shaking 等）。修改为非标准值（如 staging）时，需注意 Webpack 可能不会自动启用生产环境优化，需手动配置。
优先级：.env.[模式名] 文件中配置的 NODE_ENV 会覆盖 Vue CLI 的默认值，且优先级最高。
不建议随意修改标准环境的值：development（开发）和 production（生产）是 Vue CLI 识别的标准环境，修改它们的 NODE_ENV 可能导致预期外的构建行为（如开发环境启用压缩）。

总结

场景修改方式示例
使用默认环境（开发/生产/测试）无需修改，Vue CLI 自动赋值 npm run serve → NODE_ENV=development
自定义环境（如预发布）在 .env.[模式名] 中配置，通过 --mode 启用 .env.staging 中写 NODE_ENV=staging，执行 npm run build --mode staging

NODE_ENV 的核心作用是「标识环境」，通常配合条件语句（如 if (process.env.NODE_ENV === ‘production’)）实现不同环境的差异化逻辑。

5 Source Map 是什么意思

在前端开发中，Source Map（源代码映射）是一种用于关联「压缩/混淆后的生产环境代码」与「原始开发代码」的映射文件（通常以 .map 为后缀）。它的核心作用是：当生产环境代码运行出错时，浏览器能通过 Source Map 定位到原始开发代码中的具体位置（如哪个文件、哪一行），极大简化线上问题的调试难度。

生产环境 Source Map 的具体含义

在开发环境中，我们编写的代码（如 Vue、JS、CSS）是「未压缩、格式清晰」的，但生产环境构建（npm run build）时，Webpack 等工具会对代码进行：