Vue.js生产部署后控制台Sources可见源码，是否正常及如何隐藏？

安全性判断 #

这种情况绝对不安全。生产环境下组件、路由、状态管理等源码文件直接暴露在浏览器Sources面板，会导致业务逻辑、页面结构完全透明，甚至可能泄露未妥善隐藏的敏感信息（如API密钥、内部接口规则），大幅降低应用的抗逆向分析能力，增加被恶意仿造、攻击的风险。

解决方案 #

1. 确认构建环境与部署文件 #

• 必须使用生产环境构建命令：执行npm run build（Vue CLI/Vite通用），生成的dist目录才是生产环境代码。禁止直接部署开发环境（npm run serve）的代码，开发模式默认会保留源码映射用于调试。
• 检查服务器部署的是否为dist目录下的文件，避免误部署开发环境的临时构建产物。

2. 关闭SourceMap（核心解决步骤） #

SourceMap是浏览器能映射到源码的关键，生产环境必须禁用：

Vue CLI项目

在项目根目录的vue.config.js中添加/修改配置：

module.exports = {
  productionSourceMap: false
}

修改后重新执行npm run build，部署新的dist文件。如果之前配置未生效，检查配置文件是否写错位置，或是否有其他插件（如@vue/cli-plugin-babel）覆盖了该设置。

Vite项目

在vite.config.js中修改build配置：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: false // 禁用生产环境SourceMap
  }
})

手动配置Webpack的项目

在webpack.config.js的生产环境配置中设置：

module.exports = {
  mode: 'production',
  devtool: false, // 关闭SourceMap生成
  // 其他Webpack配置...
}

3. 排查第三方部署平台的自动设置 #

如果使用Netlify、Vercel等平台部署，部分平台会默认开启SourceMap生成用于错误追踪，需要在平台项目设置中手动关闭该选项，确保部署的代码无源码映射文件。

内容的提问来源于stack exchange，提问作者Bigotes