摘要

在 Vue CLI 创建的项目中，vue.config.js 是核心配置文件，用于定制化构建、开发和部署流程。本文详细解析了该文件的常用配置项，包括基础路径、开发服务器、Webpack 配置、CSS 预处理、插件选项及环境变量管理，并结合代码示例和表格说明，帮助开发者高效管理项目配置，提升开发体验。

一、引言

Vue CLI 是 Vue.js 官方提供的脚手架工具，它简化了 Vue.js 项目的搭建和开发流程。在 Vue CLI 创建的项目中，vue.config.js 是一个可选的配置文件，用于对 Vue CLI 项目进行自定义配置。通过该文件，开发者可以修改 Webpack 配置、配置开发服务器、设置静态资源路径、集成第三方插件等，以满足项目的特定需求。本文将详细介绍 vue.config.js 中常用的配置项，帮助开发者更好地理解和使用该文件。

二、基础配置项


（一）publicPath

• 作用：设置应用的基础路径，即项目中静态资源的引用路径。它相当于 Webpack 中的
  1. output.publicPath

  复制代码
  配置。
  
• 适用场景：当应用部署在子路径下（如
  1. example.com/myapp/

  复制代码
  ）或通过 CDN 提供静态资源时，需要设置该路径。
  
• 示例代码：
  

1. module.exports = {
   
2.   publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/'
   
3. };

复制代码

（二）outputDir

• 作用：指定构建输出目录，默认是
  1. dist

  复制代码
  。
  
• 适用场景：当需要将构建文件输出到不同的目录中（如 CI/CD 流程或特定的文件结构需求）时，可以修改该配置。
  
• 示例代码：
  

1. module.exports = {
   
2.   outputDir: 'build'
   
3. };

复制代码

（三）assetsDir

• 作用：设置静态资源（如图片、字体、CSS）的子目录。
  
• 适用场景：当需要对静态资源进行分类管理时，可以使用该配置。
  
• 示例代码：
  

1. module.exports = {
   
2.   assetsDir: 'assets'
   
3. };

复制代码

（四）lintOnSave

• 作用：决定在保存时是否启用 ESLint 检查。
  
• 适用场景：在开发过程中，可以通过该配置控制代码检查的开启和关闭。
  
• 选项说明：
  
  
  
  • 1. true

    复制代码
    ：启用 ESLint 检查。
    
  • 1. false

    复制代码
    ：禁用 ESLint 检查。
    
  • 1. 'error'

    复制代码
    ：只有在 ESLint 报错时才中断构建。
    
  
  
• 示例代码：
  

1. module.exports = {
   
2.   lintOnSave: true
   
3. };

复制代码

（五）常用配置项表格总结

配置项类型默认值说明publicPathString‘/’应用的基础路径outputDirString‘dist’构建输出目录assetsDirString‘’静态资源的子目录lintOnSaveBoolean/Stringtrue是否启用 ESLint 检查
三、开发服务器配置项


（一）devServer

• 作用：修改 Webpack DevServer 的设置，包括端口、热重载、代理等。
  
• 常用配置项：
  
  
  
  • 1. port

    复制代码
    ：开发服务器的端口。
    
  • 1. open

    复制代码
    ：启动后是否自动打开浏览器。
    
  • 1. hot

    复制代码
    ：启用热模块替换（HMR）。
    
  • 1. proxy

    复制代码
    ：配置代理，用于解决开发环境中的跨域问题。
    
  
  
• 示例代码：
  

1. module.exports = {
   
2.   devServer: {
   
3.     port: 8080,
   
4.     open: true,
   
5.     hot: true,
   
6.     proxy: {
   
7.       '/api': {
   
8.         target: 'http://localhost:5000',
   
9.         changeOrigin: true,
   
10.         pathRewrite: { '^/api': '' }
    
11.       }
    
12.     }
    
13.   }
    
14. };

复制代码

（二）开发服务器配置项表格总结

配置项类型默认值说明portNumber8080开发服务器的端口openBooleanfalse启动后是否自动打开浏览器hotBooleantrue是否启用热模块替换proxyObject{}代理配置，用于解决跨域问题
四、Webpack 配置项


（一）configureWebpack

• 作用：直接修改 Webpack 的配置，允许添加插件、修改模块解析等。
  
• 适用场景：当需要对 Webpack 进行个性化修改时，可以使用该配置。
  
• 示例代码：
  

1. module.exports = {
   
2.   configureWebpack: {
   
3.     plugins: [
   
4.       // 添加插件
   
5.     ],
   
6.     resolve: {
   
7.       alias: {
   
8.         '@': '/src' // 配置路径别名
   
9.       }
   
10.     }
    
11.   }
    
12. };

复制代码

（二）chainWebpack

• 作用：使用
  1. webpack-chain

  复制代码
  提供的链式 API，更细粒度地修改 Webpack 配置。
  
• 适用场景：当需要对 Webpack 配置进行复杂的修改时，可以使用该配置。
  
• 示例代码：
  

1. module.exports = {
   
2.   chainWebpack: config => {
   
3.     config.entry('app').add('./src/main.js');
   
4.     config.plugin('html').tap(args => {
   
5.       args[0].title = 'My Vue App';
   
6.       return args;
   
7.     });
   
8.   }
   
9. };

复制代码

（三）Webpack 配置项表格总结

配置项类型默认值说明configureWebpackObject/Function{}直接修改 Webpack 配置chainWebpackFunction-使用链式 API 修改 Webpack 配置
五、CSS 配置项


（一）css

• 作用：控制 CSS 相关的构建行为，包括 CSS 的模块化、是否提取 CSS 文件等。
  
• 常用配置项：
  
  
  
  • 1. extract

    复制代码
    ：在生产环境中将 CSS 提取到单独的文件。
    
  • 1. sourceMap

    复制代码
    ：是否生成 CSS 源映射文件。
    
  • 1. loaderOptions

    复制代码
    ：配置各类 CSS 预处理器（如 SASS、LESS）的选项。
    
  
  
• 示例代码：
  

1. module.exports = {
   
2.   css: {
   
3.     extract: true,
   
4.     sourceMap: false,
   
5.     loaderOptions: {
   
6.       sass: {
   
7.         prependData: `@import "~@/styles/variables.scss";`
   
8.       }
   
9.     }
   
10.   }
    
11. };

复制代码

（二）CSS 配置项表格总结

配置项类型默认值说明extractBooleantrue是否提取 CSS 到单独文件sourceMapBooleanfalse是否生成 CSS 源映射文件loaderOptionsObject{}配置 CSS 预处理器的选项
六、插件配置项


（一）pluginOptions

• 作用：为第三方插件配置选项，Vue CLI 提供了很多插件，这些插件通常可以通过
  1. pluginOptions

  复制代码
  进行个性化配置。
  
• 适用场景：当使用第三方插件时，需要为其提供额外的配置选项。
  
• 示例代码：
  

1. module.exports = {
   
2.   pluginOptions: {
   
3.     'my-plugin': {
   
4.       someOption: true
   
5.     }
   
6.   }
   
7. };

复制代码

（二）插件配置项表格总结

配置项类型默认值说明pluginOptionsObject{}为第三方插件配置选项
七、环境变量配置项


（一）环境变量

• 作用：根据不同的环境（开发、生产等）配置不同的设置。
  
• 适用场景：当项目需要在不同的环境中运行时，可以通过环境变量来配置不同的设置。
  
• 示例代码：
  

1. // .env.development
   
2. VUE_APP_TITLE = 'Development App'
   
3. 
   
4. // .env.production
   
5. VUE_APP_TITLE = 'Production App'
   
6. 
   
7. // vue.config.js
   
8. module.exports = {
   
9.   configureWebpack: config => {
   
10.     config.plugins.push(
    
11.       new webpack.DefinePlugin({
    
12.         'process.env.VUE_APP_TITLE': JSON.stringify(process.env.VUE_APP_TITLE)
    
13.       })
    
14.     );
    
15.   }
    
16. };

复制代码

八、结论

vue.config.js 是 Vue CLI 项目中非常重要的配置文件，通过合理配置可以极大地提升项目的开发体验和维护效率。本文详细介绍了 vue.config.js 中常用的配置项，包括基础配置、开发服务器配置、Webpack 配置、CSS 配置、插件配置和环境变量配置等。开发者可以根据项目的实际需求，选择合适的配置项进行配置，以满足项目的特定需求。同时，建议开发者对 vue.config.js 进行版本控制，记录每次修改的原因和内容，便于回溯和协作。
以上就是Vue项目中vue.config.js常用配置项详解的详细内容，更多关于Vue vue.config.js配置项的资料请关注脚本之家其它相关文章！

来源：https://www.jb51.net/javascript/339632e0b.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！