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: '', ws: true, changeOrigin: true }, '/foo': { target: '' } } } } 配置 webpackjavascript复制代码 module.exports = { configureWebpack: { plugins: [ // 配置插件 ] }, chainWebpack: config => { // 修改 webpack 配置 } } CSS 相关配置javascript复制代码 module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } } } 配置 devtoolsjavascript复制代码 module.exports = { devtool: 'source-map' } 生产环境构建javascript复制代码 module.exports = { productionSourceMap: false, // 是否生成 sourceMap 文件 parallel: require('os').cpus().length - 1, // 构建时启用多进程 // 其他 webpack 配置... } 配置 pwajavascript复制代码 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' } } } 配置 Babeljavascript复制代码 module.exports = { babel: { presets: [ // 预设配置 ], plugins: [ // 插件配置 ] } } 第三方插件配置javascript复制代码 module.exports = { // 其他插件的配置 pluginOptions: { // 例如配置 element-ui 插件 elementUi: { size: 'small' } } } 这些只是 vue.config.js 的一些常见配置项，实际上还有很多其他的配置项和细节可以调整。你可以根据项目的实际需求进行配置。 注意：上述示例中的 和 需要替换为你实际的 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