← Back

Get Rid Of Leaked Bundled Sources in Production

Published

14 October 2023

Tags

VueJS
Deployment

Only for using Vue CLI and store the configuration in vue.config.js.

Have you ever taken a look at your deployed website source in the browser dev tools? Does it look like the image below? If yes means your source code could be leaked.

The source code in source dev tool.The source dev tool looks like when the deployment result still keep the source code.

The source code from deployment process still exists there. This may cause your entire project codebase to get leaked, moreover when you store credential information by hardcode inside the script.

To get rid of this leaked source code and to prevent the codebase getting leaked. Go to vue.config.js, then add this one option in that script.

module.exports = { // or using defineConfig({}) for better intellisense support
  // any other options
  productionSourceMap: false
}

By this productionSourceMap set to false will tell the vue/cli-service to exclude source maps to be generated in production along with the bundled JavaScript source. This option also will make the build process faster since there is no need to produce source maps.

You can see the result in the image below.

The result after excluding the source map.The result after excluding the source map.

Reference: webpack - How can I disable source maps in production for a vue.js app? - Stack Overflow