Vue CLI 配置全攻略：新手必备的项目构建与优化技巧》《掌握 Vue CLI 配置：如何为你的 Vue 项目定制开发环境》 Vue C《Vue 开发必学技巧：从零开始配置 Vue 项目开发环境》

南北极之间

于 2024-12-08 15:33:01 发布

阅读量710

点赞数 30

分类专栏：前端开发文章标签： vue.js 前端 javascript 网页设计 vuejs vue.config.js vue配置

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/144326493

版权

前端开发专栏收录该内容

601 篇文章

订阅专栏

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

Vue.config.js 配置完全解析：一步步教你自定义 Vue 开发环境

在 Vue.js 开发中，vue.config.js 文件是一个非常重要的配置文件，它可以帮助开发者对 Vue 项目的构建过程进行细致的配置与优化。特别是对于 Vue CLI 创建的项目，通过配置 vue.config.js 文件，你可以根据项目需求调整开发和生产环境的行为，甚至自定义一些构建细节，提升开发效率和项目性能。

今天，我们将通过这篇教程来详细解析 vue.config.js 文件的常见配置项。你将学到如何修改 Vue 项目的构建配置，如何配置开发服务器，如何优化生产环境的构建等，适合初学者跟随逐步操作。

什么是 `vue.config.js` 文件

在 Vue CLI 项目中，vue.config.js 文件是一个配置文件，位于项目的根目录下。它主要用于配置开发和构建环境。通过修改该文件，你可以控制 Vue 项目的构建过程、开发服务器的行为、样式处理、插件设置等各种选项。默认情况下，Vue CLI 项目并不包含该文件，只有在需要进行自定义配置时，才会创建该文件。

常见的 `vue.config.js` 配置项

vue.config.js 文件包含许多配置项，可以根据项目需求进行调整。接下来，我们将逐一解释一些常见的配置项。

1. `publicPath`

作用：配置 Vue 应用的基础 URL，决定了项目在部署时的路径。比如，当你将应用部署到服务器的子路径下时，publicPath 就需要指定该子路径。

module.exports = {
  publicPath: '/myapp/',  // 如果应用部署在 /myapp 路径下
};

解释：如果你将 Vue 应用部署到 https://example.com/myapp/，那么 publicPath 应设置为 /myapp/，这样 Vue 会自动计算正确的资源路径。

2. `outputDir`

作用：指定打包输出的目录。默认情况下，Vue 项目会将构建后的文件输出到 dist 目录。

module.exports = {
  outputDir: 'dist',  // 输出目录，默认为 dist
};

解释：你可以通过设置 outputDir 来修改输出目录的名称，便于管理项目的构建结果。

3. `assetsDir`

作用：配置静态资源（如图片、字体、样式文件等）存放的子目录。

module.exports = {
  assetsDir: 'static',  // 静态资源文件存放在 dist/static 目录下
};

解释：修改 assetsDir 可以将静态资源放在一个特定的文件夹中，以便管理或提高构建的组织性。

4. `lintOnSave`

作用：控制在保存时是否启用代码质量检查（Linting）。默认为 true，表示每次保存时会自动检查代码。

module.exports = {
  lintOnSave: false, // 禁用保存时的 ESLint 检查
};

解释：将 lintOnSave 设置为 false 可以禁用自动 lint 检查，特别是当你觉得自动检查影响开发速度时，可以选择禁用它。

5. `transpileDependencies`

作用：指定是否将 node_modules 中的依赖转译为兼容的 JavaScript 代码。

module.exports = {
  transpileDependencies: ['some-dependency'],  // 转译指定的依赖
};

为什么这歌示例里的transpileDependencies 后面的值是数组，而不是布尔值？

解释：

transpileDependencies 是 Vue CLI 配置中的一个选项，用于指定需要通过 Babel 进行转译的第三方依赖（位于 node_modules 中）。这是为了确保那些使用了较新 JavaScript 语法的库在旧版浏览器中也能够兼容运行。
transpileDependencies 接受数组或 布尔值。
- 如果你传入数组，它会指定哪些依赖需要转译。例如，['dependency-name'] 就表示只转译 dependency-name 这个包。
- 如果你传入 true，表示转译所有 node_modules 中的依赖。
- 如果你传入 false，则表示不转译任何依赖。

示例：

数组：只转译指定的依赖包

module.exports = {
  transpileDependencies: ['some-library', 'another-library'],
};

布尔值 true：转译所有依赖

module.exports = {
  transpileDependencies: true,  // 转译所有依赖
};

布尔值 false：不转译任何依赖

module.exports = {
  transpileDependencies: false,  // 不转译任何依赖
};

总结：

在示例中，transpileDependencies: ['dependency-name'] 中的 ['dependency-name'] 是数组，表示你希望只转译名为 dependency-name 的依赖包。如果你想转译多个依赖，可以在数组中列出它们。

解释：对于一些使用较新 JavaScript 语法的第三方库，可以通过 transpileDependencies 让 Vue CLI 转译这些库，以便在旧浏览器中兼容使用。

6. `devServer`

作用：配置开发服务器，如热更新、代理请求、端口号等。

module.exports = {
  devServer: {
    port: 8080,               // 设置开发服务器端口号
    open: true,               // 自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 设置 API 请求代理
        changeOrigin: true,    // 解决跨域问题
      }
    },
    hot: true,                // 启用热模块替换（HMR）
  },
};

解释：你可以通过 devServer 配置来定制开发服务器的行为，例如设置端口、代理请求、自动打开浏览器等。

7. `css`

作用：配置 CSS 相关的选项，包括是否启用 CSS Modules、是否使用预处理器（如 Sass、Less），以及如何引入全局变量。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/variables.scss";`  // 全局引入 SCSS 变量文件
      },
    },
  },
};

解释：通过 css 配置，可以在每个 .scss 文件中自动引入全局变量，从而避免在每个文件中手动引入。

8. `configureWebpack`

作用：直接修改 Webpack 配置。

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),  // 自定义路径别名
      }
    },
  },
};

解释：你可以在 configureWebpack 中调整 Webpack 配置，如修改路径别名、添加插件等。

9. `chainWebpack`

作用：通过 webpack-chain 的 API 链式修改 Webpack 配置，提供更细粒度的控制。

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My Vue App';  // 修改 HTML 中的 title
      return args;
    });
  },
};

解释：通过 chainWebpack，你可以更灵活地调整 Webpack 配置，适应更复杂的需求。

10. `pluginOptions`

作用：一些 Vue 插件可能提供自定义配置，可以在 pluginOptions 中进行设置。

module.exports = {
  pluginOptions: {
    'some-plugin': {
      option1: true,
      option2: 'value'
    }
  },
};

解释：你可以为插件提供具体的配置，以满足特定需求。

11. `productionSourceMap`

作用：配置是否在生产环境中生成 source map。默认情况下，生产环境不会生成 source map。

module.exports = {
  productionSourceMap: false,  // 禁用生产环境的 source map，减小文件体积
};

解释：禁用 productionSourceMap 可以减少构建文件的大小，但调试时不再能看到源代码。

12. `parallel`

作用：是否启用多核并行构建，提高构建速度。

module.exports = {
  parallel: true,  // 启用并行构

建
};

解释：如果你的机器支持多核 CPU，启用并行构建可以显著提高构建速度。

13. `pages`

作用：配置多页面应用（MPA）模式。

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/about.js',
      template: 'public/about.html',
      filename: 'about.html'
    }
  },
};

解释：对于多页面应用，你可以通过 pages 配置为每个页面定义单独的入口、模板和输出文件。

完整的 `vue.config.js` 配置文件

下面是一个完整的 vue.config.js 文件示例，包含了所有常见的配置项以及详细的注释。这个文件适用于一个常见的 Vue CLI 项目，你可以根据实际需求修改其中的值。

const path = require('path');

module.exports = {
  // 基础路径，决定应用的部署路径。默认为 '/'，可以根据需要设置为子路径。
  publicPath: '/myapp/', // 如果你的应用部署在子路径下，如 https://example.com/myapp/

  // 构建输出目录，默认是 'dist'，你可以根据需要更改它。
  outputDir: 'dist',  // 设置打包输出的目录，默认是 dist

  // 静态资源目录，用于存放图片、字体等文件。默认为 'static'。
  assetsDir: 'static', // 设置静态资源文件夹的名称，默认是 static

  // 设置开发环境的相关配置项，如端口号、是否自动打开浏览器、代理配置等。
  devServer: {
    port: 8080,           // 设置开发服务器的端口
    open: true,           // 是否在开发服务器启动时自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 设置代理请求到 API 后端服务器
        changeOrigin: true,               // 解决跨域问题
        secure: false,                    // 如果后端是 http，设置为 false
      }
    },
    hot: true,             // 启用热模块替换（HMR）
    https: false,          // 是否启用 https 协议
  },

  // 是否在生产环境构建时生成 source map，默认是 true。如果不需要 source map 可设置为 false 以减小文件体积
  productionSourceMap: false,  // 禁用生产环境下的 source map，减小构建文件体积

  // 配置 CSS 相关的选项，如是否启用 CSS Modules、使用 Sass 等
  css: {
    // 配置 CSS 预处理器的选项
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/variables.scss";`  // 全局引入 SCSS 变量文件
      },
      less: {
        globalVars: {
          primaryColor: '#42b983', // 配置 Less 全局变量
        }
      }
    },
    // 启用 CSS Modules，默认是 false
    modules: false,  // 如果你想使用 CSS Modules，可以设置为 true
  },

  // 配置 webpack，直接修改 Webpack 配置项，使用 JavaScript 的对象配置方式
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),  // 设置路径别名
      }
    },
    plugins: [
      // 在这里你可以添加自定义的 webpack 插件
      // new MyCustomPlugin()
    ]
  },

  // 使用 webpack-chain 进行链式修改 webpack 配置，提供更细粒度的控制
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].title = 'My Vue App';  // 修改页面的 title
        return args;
      });
  },

  // 配置 Vue CLI 插件的选项
  pluginOptions: {
    'some-plugin': {
      option1: true,  // 配置插件的选项
      option2: 'value'
    }
  },

  // 是否启用并行构建，通常开启会提高构建速度（适用于多核处理器）
  parallel: true,  // 启用并行构建

  // 配置多页面应用，允许你在同一个项目中配置多个页面
  pages: {
    index: {
      entry: 'src/main.js',         // 入口文件
      template: 'public/index.html', // 页面模板
      filename: 'index.html',       // 输出的 HTML 文件名
    },
    about: {
      entry: 'src/about.js',
      template: 'public/about.html',
      filename: 'about.html',
    }
  },

  // 配置是否要转译某些依赖包，通常用于确保依赖在低版本浏览器中兼容
  transpileDependencies: [
    'dependency-name' // 需要转译的包名称
  ],

  // 是否启用代码检查（lint），在保存文件时进行代码规范检查
  lintOnSave: 'error',  // 可设置为 'true'、'false' 或 'error'，根据你的需求配置

  // 用于设置部署的生产环境的其它自定义选项
  // 你可以在此添加其它自定义的配置项
};