Vue CLI4 Vue.config.js标准配置(最全注释)

下面是详细讲解“Vue CLI4 Vue.config.js标准配置(最全注释)”的完整攻略。

什么是Vue CLI4？

Vue CLI是Vue.js官方提供的一个“脚手架”工具，它可以帮助我们快速构建Vue.js项目的基础代码结构。

Vue CLI4是Vue CLI的一个全新版本，它提供了更加简单、灵活、功能更加强大的CLI工具，使得我们可以更加方便地使用Vue.js进行开发。

什么是Vue.config.js？

Vue.config.js是一个可选的配置文件，它可以用于配置Vue CLI4的一些默认配置。在使用Vue CLI4创建项目时，Vue CLI会自动去寻找该文件并解析其中的配置项。

Vue.config.js配置项

以下是Vue.config.js常用的配置项及其默认值：

module.exports = {
  /** 基本路径 */
  publicPath: '/',
  /** 输出文件目录 */
  outputDir: 'dist',
  /** 静态资源目录 */
  assetsDir: 'static',
  /** 文件名hash */
  filenameHashing: true,
  /** 是否使用eslint */
  lintOnSave: true,
  /** 是否在生产环境中开启sourceMap */
  productionSourceMap: false,
  /** webpack-dev-server配置 */
  devServer: {
    /** 代理 */
    proxy: null,
  },
  /** css相关配置 */
  css: {
    /** 是否开启sourceMap */
    sourceMap: false,
    /** css预设器配置项 */
    loaderOptions: {},
    /** 是否启用css分离插件 */
    extract: true,
  },
};

下面是这些配置项的详细说明：

publicPath

类型：string
默认值：'/'

该配置项用于配置项目的基本路径。当我们有一些静态资源需要引用时，通常会使用相对路径或绝对路径。但是相对路径在不同的路由下可能会有问题，而绝对路径又可能会有跨域等问题。因此我们可以使用publicPath来配置项目的基本路径，这样我们就可以使用相对路径的方式引用静态资源了。

outputDir

类型：string
默认值：'dist'

该配置项用于配置打包后的输出目录。当我们使用npm run build打包项目时，打包后的文件会被放到该目录中。

assetsDir

类型：string
默认值：'static'

该配置项用于配置静态资源的目录。当我们使用npm run build打包项目时，静态资源会被放到该目录中。

filenameHashing

类型：boolean
默认值：true

该配置项用于配置文件名的hash值是否启用。当该配置项为true时，打包后的文件名会被添加hash值，从而保证文件名的唯一性。

lintOnSave

类型：boolean|'error'|'warning'
默认值：true

该配置项用于配置是否在开发过程中启用eslint，并定义eslint的错误级别。当该配置项为true时，eslint会在开发过程中启用，并且定义的错误级别为'warning'。当该配置项为'error'时，eslint会直接中断编译，并输出错误信息。当该配置项为'warning'时，eslint会输出警告信息，但不会中断编译。

productionSourceMap

类型：boolean
默认值：false

该配置项用于配置在生产环境中是否启用sourceMap。当该配置项为true时，sourceMap会被启用，方便我们在调试生产环境的代码时进行定位。

devServer

类型：Object
默认值：

{
  /** 代理 */
  proxy: null,
}

该配置项用于配置webpack-dev-server的相关配置。当我们使用npm run serve启动开发服务器时，webpack-dev-server会使用该配置项中定义的配置进行启动。

下面是该配置项中常用的一个配置项：

proxy

类型：string|Object
默认值：null

该配置项用于配置开发服务器的proxy代理。当我们在开发过程中需要请求后端API时，可能会遇到跨域的问题。此时我们可以配置proxy代理来解决该问题。proxy可以是一个字符串或者一个对象。当proxy为字符串时，它会被解析成一个对象。proxy对象可以包含以下属性：

target：string类型，必填项。代理的目标服务器地址。
changeOrigin：boolean类型，可选。是否开启跨域访问。
pathRewrite：Object类型，可选。重写请求路径。

css

类型：Object
默认值：

{
  /** 是否开启sourceMap */
  sourceMap: false,
  /** css预设器配置项 */
  loaderOptions: {},
  /** 是否启用css分离插件 */
  extract: true,
}

该配置项用于配置应用的css。

下面是该配置项中常用的一个配置项：

loaderOptions

类型：Object
默认值：{}

该配置项用于配置css预处理器的loader选项。该选项的使用方式与在webpack中配置loader选项相同。

最全注释示例1

module.exports = {
  /**
   * 手动指定入口文件
   * entry为 object 时，表现如下：
   * 如配置多个入口，可使用 entry:{key1:'file1.js',key2:'file2.js'} 的方式命名最终生成的文件名
   */
  // entry: {
  //   // 配置多个入口，打包多个文件，使用了 entry:{key1:'file1.js',key2:'file2.js'} 的方式命名最终生成的文件名
  //   index: ['@babel/polyfill', './src/main.js'],
  //   mobile: ['@babel/polyfill', './src/mobile.js'],
  // },
  /**
   * 在内部的webpack配置中，向所有 Sass 样式传入共享的全局变量，而不需要显式地导入它们
   * 可以在 sass 文件中使用 `$main-color`，而不需要知道变量 main-color 所映射的实际值。
   */
  css: {
    loaderOptions: {
      sass: {
        // 所有 Sass/Scss 文件都会共享 these 的全局变量
        prependData: `@import "@/assets/scss/these.scss";`,
      },
    },
  },
  /**
   * chainWebpack 能够接收一个链式函数，它会在内部被定义的 webpack-chain 引用。
   * 如果在你的插件里使用了 chainWebpack 配置，则会与其他插件定义拼接在一起后，一同作用于webpack的内部配置。
   */
  chainWebpack: (config) => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@scss', resolve('src/assets/scss'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@plugins', resolve('src/plugins'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@common', resolve('./src/common'));

    // 对图片进行压缩处理
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { pessimistic: true },
        optipng: { enabled: false },
        pngquant: { quality: [0.75, 0.90], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 },
      });

    // 打包分析（通过 "npm run build --report" 生成）
    if (process.env.NODE_ENV === 'production' && process.env.BUNDLE_ANALYSIS) {
      config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin);
    }
  },
};

该配置项在Vue.config.js中配置了entry、css、chainWebpack等选项，并对这些选项进行了详细的注释说明。其中，该配置项使用了三条示例代码：

示例代码一：手动指定入口文件。
示例代码二：向所有 Sass 样式传入共享的全局变量。
示例代码三：使用chainWebpack方法添加别名，并对图片进行压缩处理。

最全注释示例2

module.exports = {
  /**
   * 设置跨域请求
   */
  devServer: {
    open: true,
    port: 8080, // npm run serve 启动的端口
    // proxy API 到后端的服务地址
    proxy: {
      // '/api': 'http://localhost:3000', // 配置了一个  http://localhost:8080/api/user 路径下的请求，会自动转发到 http://localhost:3000/user
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
  /**
   * chainWebpack 能够接收一个链式函数，它会在内部被定义的 webpack-chain 引用。
   * 如果在你的插件里使用了 chainWebpack 配置，则会与其他插件定义拼接在一起后，一同作用于webpack的内部配置。
   */
  chainWebpack: (config) => {
    /**
     * 因为官方只提供了 vue.runtime.js，如果你有写 template 用 compiler，那么需要修改以下 webpack 配置
     */
    if (process.env.NODE_ENV === 'production') {
      config.module.rule('vue').test(/\.vue$/).use('vue-loader').loader('vue-loader').tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag.startsWith('ion-'),
        };
        return options;
      });
    }
  },
};

该配置项在Vue.config.js中配置了devServer、chainWebpack等选项，并对这些选项进行了详细的注释说明。其中，该配置项使用了两条示例代码：