vue.config.js中的配置

 兼容性问题

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,
  // 所以需要在vue.config.js中使用transpileDependencies属性配置node_modules
  // 中指定哪些文件夹或文件需要编译.
  transpileDependencies: true
})

true的时候是全部编译

vue中lintOnSave配置

用途
设置是否在开发环境下每次保存代码时都启用 eslint验证。

assetsDir

• Type: string
• Default: ''

作用：

设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。

注意： 该目录是相对于 outputDir 。

indexPath

• Type: string
• Default: 'index.html'

用途

用于设定打包生成的 index.html 文件的存储位置

注意:

1. 该路径若是相对路径，则相对于 outputDir；当然，也可以是一个绝对路径；
2. 路径一定要以文件名+后缀结尾，最好以index,html结尾。

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: './assets',
  indexPath: 'index.html',
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
}

热更新

module.exports = {
   devServer: {
      port: port,
      open: true,
      overlay: {
        warnings: false,
        errors: true
      },
      before: require('./mock/mock-server.js')
    }
}

webpack优化之productionSourceMap

每个文件打包后都会出现一个.map文件，.map文件会出现一定的网络安全问题，我们可以通过productionSourceMap进行操作，使打包的文件不在出现.map文件，打包后的文件体积也会减少。

module.exports = {
  productionSourceMap: false
}