Disabling Source Map in Vue projects in a production environment is simple and is mainly achieved by modifying the build configuration. 1. For Vue CLI projects, set productionSourceMap: false in vue.config.js; 2. For Vite projects, set sourcemap to false in the build configuration of vite.config.js. This prevents .map files from being generated, improves security, reduces deployment volume and avoids misleading online debugging. Verification methods include checking whether the dist directory contains .map files and whether the source code structure cannot be expanded in the browser developer tools. It is recommended to include configuration in version control to ensure team consistency.

Disabling Source Map in Vue projects in a production environment is actually very simple, it mainly controls the relevant options in the build configuration. Vue projects usually use Vue CLI or Vite for packaging and construction, and the settings of different tools are slightly different.

Modify vue.config.js to close Source Map (for Vue CLI)

If you are creating a project through the Vue CLI, the production build will generate .map files by default, which is convenient for debugging, but it is recommended to turn it off when it is online.

You only need to add the following configuration to the vue.config.js file in the root directory of the project:

 module.exports = {
  productionSourceMap: false
}

After this configuration, the source map file will not be generated when executing npm run build or yarn build .

How to disable Source Map when building with Vite

If you are using a Vue project built by Vite, the way to close the source map is slightly different.

In vite.config.js , the generation of sourcemap can be controlled through build configuration item:

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: false
  }
})

After this configuration, Vite will not output the source map file when packaged.

Why do you need to turn off Source Map?

• Security considerations : source map will make it easier for others to restore your source code structure, especially for projects with more sensitive front-end logic.
• Reduce deployment volume : Source map files can take up some space, especially in large projects, removing them can reduce the size of the release package.
• Avoid misleading debugging : Online environments should not be used for debugging. Keeping source maps may be used for misleading problems, affecting troubleshooting efficiency.

Confirm whether Source Map is successfully disabled

You can verify that the source map is not generated in the following ways:

• After executing the build command, check whether the .map file exists in dist/ directory.
• Open the Sources panel in the browser developer tools to check if there is an expandable source code structure.

If you do not see the source code map or .map file, it means that it has taken effect.

Basically that's it. The operation is not complicated but is easy to ignore, especially in team collaboration. Remember to add this configuration to version control to ensure that the production version built by everyone is consistent.

The above is the detailed content of How to disable source maps in production Vue build?. For more information, please follow other related articles on the PHP Chinese website!