vue中vue.config.js文件配置详解

// const path = require('path');
module.exports = {
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'',
   */
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 例如 https://www.my-app.com/
  // 如果你的应用部署在一个子路径下，那么你需要在这里
  // 指定子路径。比如将你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 '/my-app/'
 
  //baseUrl: '/',//vue-cli3.3以下版本使用
  publicPath: '/',//vue-cli3.3+新版本使用
 
  // 构建好的文件输出到哪里
  outputDir: "dist",
 
  // assetsDir: "base" //静态资源打包地址
 
  //以多页模式构建应用程序。
  pages: undefined,
 
  // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error'
  // 当设置为‘error’时，检查出的错误会触发编译失败
  lintOnSave: true,
 
  // 使用带有浏览器内编译器的完整构建版本,是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
 
  // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
  // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  transpileDependencies: [],
 
  // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度  映射文件 打包时使用
  productionSourceMap: false,
 
  // 调整内部的webpack配置.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => { },
  // chainWebpack: () => {
  //   // 删除懒加载模块的prefetch，降低带宽压力
  //   // 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
  //   //config.plugins.delete('prefetch');
  //   //if(process.env.NODE_ENV === 'production') {
  //   // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
  //   //} else {
  //   // 为开发环境修改配置...
  //   //}
  // },
  configureWebpack: () => { },
  // configureWebpack: () => {
  // // 生产and测试环境
  // let pluginsPro = [
  //   new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)
  //     filename: '[path].gz[query]',
  //     algorithm: 'gzip',
  //     test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  //     threshold: 8192,
  //     minRatio: 0.8,
  //   }),
  //   new BundleAnalyzerPlugin(),
  // ];
  // //开发环境
  // let pluginsDev = [
  //   new vConsolePlugin({
  //     filter: [], // 需要过滤的入口文件
  //     enable: true // 发布代码前记得改回 false
  //   }),
  // ];
  // if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
  //   config.plugins = [...config.plugins, ...pluginsPro];
  // } else {
  //   // 为开发环境修改配置...
  //   config.plugins = [...config.plugins, ...pluginsDev];
  // }
  // },
 
  // CSS 相关选项
  css: {
    // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
    // 也可以是传递给 extract-text-webpack-plugin 的选项对象
    // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用