vue.config.js 是 Vue CLI 项目中一个非常重要的配置文件，它允许你定制 Vue CLI 构建流程中的各种选项。通过配置 vue.config.js，你可以修改默认的 Webpack 配置，添加插件，配置开发服务器，甚至调整其他与构建相关的行为。
vue.config.js 基本结构
vue.config.js 是一个 Node.js 模块，导出一个配置对象。在该文件中，你可以根据需求添加不同的配置项。
// vue.config.js
module.exports = {// 配置内容
};
常见的 vue.config.js 配置项
1. publicPath（公共路径）
publicPath 配置用于指定应用的基础路径，也就是项目中静态资源的引用路径。它相当于 Webpack 中的 output.publicPath 配置。
module.exports = {publicPath: '/myapp/' // 资源文件的公共路径
};
- 开发环境：默认是
/，如果你的 Vue 应用部署在子路径下（比如example.com/myapp/），你可以设置为/myapp/。 - 生产环境：如果你的应用部署到不同的路径上，比如通过 CDN 提供静态资源，可以设置为相应的路径或 URL。
2. outputDir（输出目录）
outputDir 配置决定了构建时输出文件的目录，默认是 dist。
module.exports = {outputDir: 'build' // 修改输出目录为 'build'
};
这可以用来将构建文件输出到不同的目录中，适用于 CI/CD 或特定的文件结构需求。
3. assetsDir（静态资源目录）
assetsDir 配置项用于指定静态资源（如图片、字体、CSS）的子目录。
module.exports = {assetsDir: 'assets' // 静态资源文件放在 'assets' 目录下
};
默认情况下，静态资源文件会直接放在 dist 目录下，而 assetsDir 可以用于将其进一步分类到指定的子目录中。
4. lintOnSave（开启保存时的 ESLint 检查）
lintOnSave 配置项用于决定在保存时是否启用 ESLint 检查。默认情况下，Vue CLI 会在开发时启用 ESLint，但如果不需要，也可以关闭。
module.exports = {lintOnSave: true // 启用保存时的 ESLint 棼查
};
可以设置为：
true: 启用 ESLint 检查。false: 禁用 ESLint 检查。'error': 只有在 ESLint 报错时才中断构建。
5. devServer（开发服务器配置）
devServer 配置用于修改 Webpack DevServer 的设置，包括端口、热重载、代理等。
module.exports = {devServer: {port: 8080, // 设置开发服务器端口open: true, // 启动后自动打开浏览器hot: true, // 启用热模块替换proxy: {'/api': {target: 'http://localhost:5000', // 设置代理changeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 重写路径}}}}
};
常用的 devServer 配置项：
port：指定开发服务器的端口。open：设置为true时，启动服务器后自动打开浏览器。hot：启用热模块替换（HMR），在代码更新时无需刷新页面。proxy：配置代理，将请求代理到后端服务（通常用于开发环境中跨域问题）。
6. configureWebpack（修改 Webpack 配置）
configureWebpack 允许你修改 Webpack 的配置，直接修改 Webpack 配置对象。这是 Vue CLI 提供的一个强大功能，它可以对 Webpack 进行个性化的修改。
module.exports = {configureWebpack: {plugins: [// 这里可以配置 Webpack 插件],resolve: {alias: {'@': '/src' // 配置路径别名}}}
};
plugins: 可以在此配置 Vue 项目中所需要的 Webpack 插件。resolve: 可以修改 Webpack 的模块解析配置，通常用于配置路径别名，避免使用长路径。
7. chainWebpack（链式 Webpack 配置）
chainWebpack 提供了一种更细粒度的 Webpack 配置修改方式，它基于 Webpack Chain（一个操作 Webpack 配置的 API）。这使得你可以以链式调用的方式来修改 Webpack 配置，并且对配置的修改更加灵活。
module.exports = {chainWebpack: config => {// 修改 entry 配置config.entry('app').add('./src/main.js');// 使用 Webpack 插件config.plugin('html').tap(args => {args[0].title = 'My Vue App';return args;});}
};
chainWebpack 的优势：
- 更直观地操作 Webpack 配置，支持链式操作。
- 可以精细化地控制 Webpack 配置，进行增、删、改操作。
8. transpileDependencies（转译依赖）
transpileDependencies 配置项用于指定哪些 node_modules 中的依赖需要被转译。这对于某些使用现代 JavaScript 特性的依赖非常重要。
module.exports = {transpileDependencies: ['some-package'] // 转译某些依赖
};
9. productionSourceMap（生产环境下是否生成源映射）
productionSourceMap 配置项用于决定是否在生产环境中生成源映射文件。默认情况下，Vue CLI 会在生产环境中生成源映射文件，但你可以根据需求关闭它。
module.exports = {productionSourceMap: false // 生产环境关闭源映射
};
关闭源映射可以减少生产环境构建产物的体积，并提高构建速度。
10. css（CSS 相关配置）
css 配置项用于控制 CSS 相关的构建行为，包括 CSS 的模块化、是否提取 CSS 文件等。
module.exports = {css: {extract: true, // 在生产环境中将 CSS 提取到单独的文件sourceMap: false, // 生产环境是否生成 CSS 源映射loaderOptions: {sass: {prependData: `@import "~@/styles/variables.scss";` // 自动引入全局 SASS 变量}}}
};
常用的 css 配置项：
extract：控制是否将 CSS 提取到单独的文件中（生产环境中通常会开启）。sourceMap：设置是否为 CSS 生成源映射文件。loaderOptions：配置各类 CSS 预处理器（如 SASS、LESS）的选项。
11. pluginOptions（插件选项）
pluginOptions 允许你为第三方插件配置选项，Vue CLI 提供了很多插件，这些插件通常可以通过 pluginOptions 进行个性化配置。
module.exports = {pluginOptions: {'my-plugin': {someOption: true}}
};
总结
vue.config.js 配置文件是 Vue CLI 项目中用来定制 Webpack 配置、开发服务器以及其他构建相关行为的地方。它提供了非常灵活的配置选项，能够让你根据项目需求进行定制，涵盖了从路径别名、静态资源目录到开发环境和生产环境的优化等多个方面。通过合理配置 vue.config.js，你可以提升开发效率，优化构建过程，并解决一些特殊需求。