vue.config.js常用配置详解

当你在Vue项目中需要自定义Webpack的配置时，可以通过在项目根目录下创建vue.config.js文件来实现。Vue CLI读取该文件，并根据其中的配置修改Webpack的默认配置以满足你的需要。以下是对vue.config.js文件的常用配置的详细说明。

基本配置

以下是最简单的vue.config.js文件：

module.exports = {
  // 选项...
}

在这个基础上，你可以添加一些选项，以自定义Webpack配置。以下是一些可用选项及其默认值：

publicPath

• 类型：string
• 默认值：'/'
• 作用：部署应用时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但 vue-cli 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

outputDir

• 类型：string
• 默认值：'dist'
• 作用：当运行 vue-cli-service build 时生成的生产环境构建文件的目录。

assetsDir

• 类型：string
• 默认值：''
• 作用：放置生成的静态资源 (js、css、img、fonts) 的目录的相对路径，默认值为 ''，即在直接放在输出目录中（也可以是一个相对于outputDir的子目录）

indexPath

• 类型：string
• 默认值：'index.html'
• 作用：指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

以下是一个示例：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

这个示例中，如果你运行 npm run build 命令，那么你的 production 构建输出文件将生成在我的部署域名的 /production-sub-path/ 下面。

高级配置

如果你需要更细粒度地控制某个部分的Webpack配置，你可以通过使用chainWebpack选项，手动修改Webpack配置。这个选项会接收一个 Webpack Chain Instance，允许对内部的Webpack配置进行更细粒度的修改。

以下是一个示例，用于将所有的内敛svg图标转为外链引用：

module.exports = {
  chainWebpack: config => {
    //原生vue.config.js生成的webpack.config.js  
    //不知道如何新建一个vue.config.js的同学可以  
    //运行 vue ui，通过web界面创建，自动创建。
    //向config.module.rules中添加一个rule
    config.module
      .rule('svg-inline')
      .test(/\.(svg)(\?.*)?$/)
      .use('svg-inline-loader')
      .loader('svg-inline-loader')
      .end();

    //以html-webpack-plugin插件的参数为例
    //更改html-webpack-plugin的html处理方式
    config.plugin('html')
      .tap(args => {
        args[0].inlineSource = '.(svg|png|jpg|gif)$';
        return args;
      });

    //更改url-loader的处理方式
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.limit = 10240;
        return options;
      });
  }
};

chainWebpack是一个回调，可以访问内部的Webpack配置。

Vue CLI 默认将webpack-dev-server客户端入口添加到生成的index.html，以自动注入代表客户端的脚本路径，以实现实时重载和相应注销。如果你的应用程序需要比默认更复杂的html结构，你可以通过configureWebpack选项更改其行为。

以下是一个示例：

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
};

这个示例中，我们向内部的Webpack配置添加了自定义插件MyAwesomeWebpackPlugin。

总结

在这篇文章中，我们介绍了vue.config.js常用配置，并提供了一些示例。我们看到，通过Vue CLI提供的选项，可以轻松地自定义Vue项目的Webpack配置。如果你需要更细粒度地控制Webpack配置，你可以使用chainWebpack和configureWebpack选项进行修改。