vue.config.js配置项有哪些

Vue-cli3.0不再有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置。

一、基本配置

• publicPath：部署应用包时的基本 URL
• outputDir：build 时输出的文件目录
• lintOnSave：eslint-loader 是否在保存的时候检查
• assetsDir：放置静态文件夹目录
• runtimeCompiler：
• productionSourceMap：生产环境是否要生成 sourceMap
• devServer：dev环境下，webpack-dev-server 相关配置
• port：开发运行时的端口
• host：开发运行时域名
• https：是否启用 https
• open：npm run serve 时是否直接打开浏览器

二、插件及规则的配置

在vue.config.js如果要新增/修改 webpack 的 plugins 或者 rules , 有2种方式。

• configureWebpack 方式 是相对比较简单的一种方式`
• chainWebpack方式 chainWebpack 链式操作 (高级)

1、configureWebpack

它可以是一个对象：和 webpack 本身配置方式是一致，该对象将会被 webpack-merge 合并入最终的 webpack 配置

它也可以是一个函数：直接在函数内部进行修改配置

configureWebpack: {rules:[],plugins: []}
configureWebpack: (config) => {
} 
复制代码 

2、规则rules的配置

在webpack中 rules 是 module 的配置项，而所有的配置的都是挂载到 config 下的，所以新增一个rule方式：

config.module.rule(name).use(name).loader(loader).options(options) // 新增
config.module.rule(name).use(name).tap(options => newOptions) // 修改

3、插件plugins 的配置

config.plugin(name).use(WebpackPlugin, args) 新增
config.plugin(name).tap(args => newArgs) // 修改参数
config.plugins.delete(name) // 删除

4、示例代码

module.export = {
  publicPath: '/',// 基本路径
  outputDir: 'dist',// 输出文件目录
  assetsDir: 'assets',
  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  runtimeCompiler: true, 
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  port: '8090',
  host: '198.124.23.1',
  css: {
    // 向预处理器 Loader 传递选项
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        globalVars: {
          primary: '#fff'
        }
      }
    },
  },
  // webpack-dev-server 相关配置
  devServe: {
    ...
  },
  // node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.
  transplieDependencies: ['@element-ui'],
  // 调整内部的 webpack 配置：chainWebpack、configureWebpack
  chainWebpack: (config) => {
    // 设置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      
    // 使用loader，loader必须在module里面设置
    config.module.rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/img/svgIcons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
     
    // 使用插件，需要new关键字
    config.plugin('compressionPlugin')
         .use(new CompressionPlugin({
           filename: '[path].gz[query]',
           algorithm: 'gzip',
           test: productionGzipExtensions,
           threshold: 10240,
           minRatio: 0.8
         }))
   },
   // chainWebpack中的config对象中的配置也可以写在configureWebpack中
   configureWebpack: {
     resolve: {
       alias: {
         '@', resolve('src')
       }
     }
   }
    
}