Configuration in vue.config.js

 Compatibility issues

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

When true, it is all compiled

lintOnSave configuration in vue

Purpose To set whether to enable eslint
validation every time the code is saved in the development environment  .

assetsDir

• Type: string
• Default: ''

effect:

Set the directory to place the static resources (js, css, img, fonts) generated by packaging.

NOTE: This directory is relative to  outputDir .

indexPath

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

use

index.html Used to set the storage location of the files generated by packaging 

Notice:

1. If the path is a relative path, it is relative to  outputDir; of course, it can also be an absolute path;
2. The path must 文件名+后缀end with , preferably index,htmlwith .

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

hot update

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

productionSourceMap optimized by webpack

After each file is packaged, a .map file will appear. The .map file will have certain network security issues. We can operate it through productionSourceMap so that the packaged file does not appear. Map file, the packaged file size will also be reduced.

module.exports = {
  productionSourceMap: false
}