详解vue.config.js的所有配置选项

发表时间: 2024-03-25 15:15

vue.config.js 是一个可选的配置文件，如果项目的根目录中没有这个文件，你需要手动创建它。这个文件是一个 Node.js 模块，会导出一个包含了 Vue CLI 项目配置的对象。

下面是一些常见的 vue.config.js 配置项：

基本路径

module.exports = {    publicPath: './'  }

输出目录

javascript复制代码	module.exports = {  	  outputDir: 'dist'  	}

放置生成的静态资源 (js、css、img、fonts)

javascript复制代码	module.exports = {  	  assetsDir: ''  	}

配置 webpack-dev-server 行为

javascript复制代码	module.exports = {  	  devServer: {  	    port: 8080, // 端口号  	    open: true, // 自动打开浏览器  	    hotOnly: false, // 热更新  	    proxy: { // 配置跨域  	      '/api': {  	        target: '<url>',  	        ws: true,  	        changeOrigin: true  	      },  	      '/foo': {  	        target: '<other_url>'  	      }  	    }  	  }  	}

配置 webpack

javascript复制代码	module.exports = {  	  configureWebpack: {  	    plugins: [  	      // 配置插件  	    ]  	  },  	  chainWebpack: config => {  	    // 修改 webpack 配置  	  }  	}

CSS 相关配置

javascript复制代码	module.exports = {  	  css: {  	    loaderOptions: {  	      sass: {  	        prependData: `@import "@/styles/variables.scss";`  	      }  	    }  	  }  	}

配置 devtools

javascript复制代码	module.exports = {  	  devtool: 'source-map'  	}

生产环境构建

javascript复制代码	module.exports = {  	  productionSourceMap: false, // 是否生成 sourceMap 文件  	  parallel: require('os').cpus().length - 1, // 构建时启用多进程  	  // 其他 webpack 配置...  	}

配置 pwa

javascript复制代码	module.exports = {  	  pwa: {  	    name: 'My App',  	    themeColor: '#4DBA87',  	    msTileColor: '#000000',  	    appleMobileWebAppCapable: 'yes',  	    appleMobileWebAppStatusBarStyle: 'black',  	    iconPaths: {  	      favicon32: 'favicon.ico',  	      favicon16: 'favicon.ico',  	      appleTouchIcon: 'icons/apple-touch-icon-152x152.png',  	      maskIcon: 'icons/safari-pinned-tab.svg',  	      msTileImage: 'icons/msapplication-icon-144x144.png'  	    }  	  }  	}

配置 Babel

javascript复制代码	module.exports = {  	  babel: {  	    presets: [  	      // 预设配置  	    ],  	    plugins: [  	      // 插件配置  	    ]  	  }  	}

第三方插件配置

javascript复制代码	module.exports = {  	  // 其他插件的配置  	  pluginOptions: {  	    // 例如配置 element-ui 插件  	    elementUi: {  	      size: 'small'  	    }  	  }  	}

这些只是 vue.config.js 的一些常见配置项，实际上还有很多其他的配置项和细节可以调整。你可以根据项目的实际需求进行配置。

注意：上述示例中的 <url> 和 <other_url> 需要替换为你实际的 URL。同时，这些配置项并不一定都需要在你的 vue.config.js 文件中全部列出，你可以只选择你需要的配置项进行配置。

在 vue.config.js 中，configureWebpack 选项允许你修改内部的 Webpack 配置。这给了你很大的灵活性来添加或覆盖默认配置。

configureWebpack 的详细配置示例：

javascript复制代码	module.exports = {  	  configureWebpack: {  	    // 添加全局变量  	    plugins: [  	      new webpack.DefinePlugin({  	        'process.env.VUE_APP_TITLE': JSON.stringify('My App')  	      })  	    ],  	  	    // 修改输出  	    output: {  	      // 输出目录（相对于 process.cwd() 或 outputDir）  	      path: path.resolve(__dirname, 'dist'),  	      // 文件名  	      filename: '[name].[contenthash].js',  	      // 其他的输出配置...  	    },  	  	    // 修改模块解析规则  	    resolve: {  	      // 别名配置  	      alias: {  	        '@': path.resolve(__dirname, 'src')  	      },  	      // 其他的解析配置...  	    },  	  	    // 修改模块规则  	    module: {  	      rules: [  	        {  	          test: /.vue$/,  	          loader: 'vue-loader',  	          options: {  	            // vue-loader 配置项  	            compilerOptions: {  	              isCustomElement: tag => tag === 'my-custom-element'  	            }  	          }  	        },  	        // 其他规则...  	      ]  	    },  	  	    // 优化和性能  	    optimization: {  	      splitChunks: {  	        chunks: 'all', // 对同步加载和异步加载的chunks都进行分割  	      },  	      minimize: true, // 开启压缩  	    },  	  	    // 添加或覆盖 devtool 配置  	    devtool: 'source-map',  	  	    // 修改其他 Webpack 配置项...  	  }  	}

在上面的示例中：

使用 webpack.DefinePlugin 添加了一个全局变量 process.env.VUE_APP_TITLE。
修改了输出的目录和文件名。
添加了别名配置，使得 @ 可以直接指向 src 目录。
对 .vue 文件加载器 vue-loader 进行了配置。
启用了代码分割和压缩。
设置了 source map。

你可以根据需要修改或添加更多的 Webpack 配置项。记住，任何你添加或修改的配置都应该遵循 Webpack 的配置规范。

请注意，configureWebpack 是一个对象，因此你可以在其中添加任何有效的 Webpack 配置。如果你想要完全替换掉默认的 Webpack 配置，可以使用 configureWebpack.renderer 和 configureWebpack.server 字段分别针对客户端和服务器端进行配置。

最后，确保你使用的 Webpack 配置项与你的 Webpack 版本兼容，因为不同版本的 Webpack 可能会有不同的配置项和语法。

作者：山水有轻音
链接：
https://juejin.cn/post/7341192656994009099