Vue-cli全局配置整理

Vue-cli配置简单明了，内部还自带了webpack，默认已经有development  test production三种模块，支持自定义环境变量来区分打包产物，所以将vue-cli常用配置整理出来，以备不时只需. 

  //baseUrl:'./',//cli3.3开始已启用 请使用publicPath
  //发布路径  会覆盖vue-cli中的 BASE_URL
  publicPath: process.env.VUE_APP_MODE === 'prod'
      ? '/prod-h5/'
      : process.env.VUE_APP_MODE === 'other'?'/other-h5/':'./',
  outputDir:'dist',//默认打包路径
  assetsDir:'static',//生成的静态资源目录,
  indexPath:'index.html',//生成Index.html的路径
  filenameHashing:true,//默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,
                        // 只有vue-cli生成index.html才生效，使用其他非自动生成的将此值设置false
 
  //在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
 //一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
 //或一个指定其 entry 的字符串
  pages:{//
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },
  //保存时lint检查  需要安装  @vue/cli-plugin-eslint
  // true/warning   编译警告 不会使编译失败
  //default  强制输出为编译错误，会导出编译失败
  //error 同 default
  //你也可以通过设置让浏览器 overlay 同时显示警告和错误
  //devServer: {
  //     overlay: {
  //       warnings: true,
  //       errors: true
  //     }
  //   }
  lintOnSave:'default',//process.env.NODE_ENV !== 'production'?'default':false
  runtimeCompiler:false,//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右
  transpileDependencies:[],// boolean [] reg  默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖
  productionSourceMap:false,//是否需要生产环境生成sourcemap
  crossorigin:undefined,//设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
  integrity:false,//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性
  configureWebpack:{},//webpack配置  如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。配置参考:  https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  chainWebpack:()=>{},//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。配置参考：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
  css:{
    //modules:从 v4 起已弃用，请使用css.requireModuleExtension。 在 v3 中，这个选项含义与 css.requireModuleExtension 相反
    requireModuleExtension:true,//默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
                                //配置参考  https://cli.vuejs.org/zh/guide/css.html#css-modules
    extract:false,//Default: 生产环境下是 true，开发环境下是 false  是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
 
    sourceMap:false,//开启css sourcemap
    loaderOptions:{//向 CSS 相关的 loader 传递选项
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    },
 
  },
  devServer:{
    //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器  配置参考:https://github.com/chimurai/http-proxy-middleware#proxycontext-config
    //proxy: 'http://localhost:4000',//
    proxy:{
      '/api': {
        target: '',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: ''
      }
    }
  },
  parallel:true,//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  pwa:{},//向 PWA 插件传递选项  参考配置:https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pluginOptions:{//这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
    foo:{
 
    }
  },
  browserslist:{
    //你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，
    // 指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性
    // 和需要添加的 CSS 浏览器前缀
  }
  //Babel   可以通过 babel.config.js 进行配置
  //ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置   https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint
  //其他配置参考官网  https://cli.vuejs.org/zh/config/