[JavaScript知识库]vue.config.js的一些配置(未完待更新)

官方文档： https://cli.vuejs.org/zh/config/#vue-config-js

• productionSourceMap (默认true)
  设置生产环境source map的开启与关闭，设置为false时，可以减小包的大小，加密源码，加速生产环境构建

1. source map的作用是定位，开启source map 在浏览器控制台输出语句时右边会显示在项目文件的位置
2. 开启source map后，打包生成的 js 文件都有一个 .map 文件。这里要注意，只有 js 才有 .map 文件
   

• publicPath
  部署包时的基本URL

1. 默认情况下，vue-cli会把应用程序部署在域的根目录下
   

2. 如果要指定子路径，则设置
   

3. 当给publicPath设置 空字符串"" or 相对路径./ 时，所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径 (这个我没懂)
   
   

• outputDir
  npm run build 时生成的目录

• indexPath
  指定生成的 index.html 的输出路径 (相对于 outputDir)
  npm run build打包后，生成的dist目录下的入口文件，默认叫index.html，设置indexPath后，indexPath叫什么生成的就叫什么

• filenameHashing (默认true)

1. 默认为true时，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存
2. 设置为false时，文件名就不包含hash了
   

• lintOnSave
  是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效

• configureWebpack
  1. 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
  2. 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本
  3. 使用configureWebpack，必须安装插件

  npm install terser-webpack-plugin --save-dev
  

  configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...  取消 console debugger 
        // 在UglifyJs删除没有用到的代码时不输出警告
        config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;   
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;  
        // 删除所有的 `debugger` 语句，可以兼容ie浏览器
        config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
        // 删除console.log
        config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
  
      } else {
        // 为开发环境修改配置...
      }
    }
  

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读