vue.config.js --- vue-cli 4.0配置

// 所有配置请参考 https://cli.vuejs.org/zh/config/
module.exports = {
  /**
   * publicPath
   * hash 模式下可使用
   * publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
   * 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致
   * 例子：http://localhost:8080/bdsp-page/#/login
   */
  publicPath: '/bdsp-page',
  // 打包输出后的文件夹
  outputDir: 'dist',
  // 静态资源存放的目录，相对于 outputDir 指定的文件夹
  assetsDir: 'static',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: './',
  /*
  //  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
  //  其值应该是一个对象，对象的 key 是入口的名字，value 是：
  //     1、一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  //     2、或一个指定其 entry 的字符串。
      pages: {
      bdsp: {
        // page 的入口
        entry: 'src/bdsp-page/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/datax.html`
      // 并且如果找不到的话，就回退到 `public/index.html`。
      // 输出文件名会被推导为 `datax.html`。
      datax: 'src/datax/main.js'
    }
  */

  /**
   * lintOnSave
   * 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
   * 这个值会在 @vue/cli-plugin-eslint 被安装之后生效
   *
   * 值: boolean | 'warning' | 'default' | 'error'
   * true ｜ 'warning' 会输出 编译警告
   * 'default' | 'error' 会输出 编译错误，导致编译失败
   */
  lintOnSave: process.env.NODE_ENV === 'development',
  // SourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，
  // 使开发者可以在源码文件中 debug
  productionSourceMap: false,

  /**
   * configureWebpack: Object | Function
   * 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中（会合并到webpack配置中）。
   * 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数
   * 该方法的第一个参数会收到已经解析好的配置。
   * 在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
   * configureWebpack: config => {
   *   if (process.env.NODE_ENV === 'production') {
   *     // 为生产环境修改配置...
   *   } else {
   *     // 为开发环境修改配置...
   *   }
   * }
   */
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
　　　　　// 设置 @ 的指向
        '@': resolve('src'),
        '@crud': resolve('src/components/system/Crud')
      }
    },
    // 警告 webpack 的性能提示
    performance: {
      // hints: 'warning',
      // // 入口起点的最大体积 整数类型（以字节为单位）
      // maxEntrypointSize: 50000000,
      // // 生成文件的最大体积 整数类型（以字节为单位 300k）
      // maxAssetSize: 30000000
      // // 只给出 js 文件的性能提示
      // assetFilter: function(assetFilename) {
      //   return assetFilename.endsWith('.js')
      // }
    }

  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  },
  /**
   * requireModuleExtension, extract, sourceMap, loaderOptions
   * css相关配置具体见：https://cli.vuejs.org/zh/config/#css-extract
   * css: {
   *    // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。
   *    // 详情：https://cli.vuejs.org/zh/guide/css.html#css-modules
   *    requireModuleExtension: true,
   *
   *    // 向预处理器 Loader 传递选项
   *    // 更多详情：https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
   *    loaderOptions: {
   *      css: {
   *        // 这里的选项会传递给 css-loader
   *      },
   *      postcss: {
   *        // 这里的选项会传递给 postcss-loader
   *      }
   *    }
   * }
   */
  /**
   * devServer
   * 所有 webpack-dev-server 的选项都支持
   * 详情：https://webpack.docschina.org/configuration/dev-server/
   * 注意：
   *    1、有些值像 host、port 和 https 可能会被命令行参数覆写。
   *    2、有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
   */
  devServer: {
    // 指定监听请求的端口号，自动使用可以设置为 'auto'
    port: port,
    // 启动完毕后，自动打开在浏览器上
    open: false,

    // overlay: true  当出现编译错误或警告时，在浏览器中显示全屏覆盖。
    // 当前配置表示，只显示错误，不显示警告
    overlay: {
      warnings: false,
      errors: true
    },
    /**
     * proxy：请求代理
     * 值：
     * 1、String
     *    例：proxy: 'http://localhost:4000'
     *    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000
     * 2、Object
     *    完整的选项可以查阅 https://github.com/chimurai/http-proxy-middleware#proxycontext-config
     */
    proxy: {
      // 如果检测到以 /api 开头的请求，则会开启代理
      '/api': {
        // 转换为 真实的 请求地址
        target: process.env.VUE_APP_BASE_API,
        // 是否跨域：true 是；false 否
        changeOrigin: true,
        // 将 第一个 /api 改为 api ，可以改任意值
        pathRewrite: {
          '^/api': 'api'
        }
      }
      /**
       * 例： 请求路径为 /api/login，真实地址为 http://localhost:8080/
       * 使用代理：
       * '/api': {
       *    target: 'http://localhost:8080/',
       *    changeOrigin: false,
       *    pathRewrite: {
       *      '^/api': ''
       *    }
       *  }
       * 经过代理以后的请求地址：http://localhost:8080/login
       *
       * 注意：
       * 如果使用了请求拦截器，并设置了统一的请求头，
       * 则代理收到的是 拦截过后 的请求路径，即 请求头+请求路径
       */
    }
  },
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}