Vue3+TypeScript应用源码在浏览器控制台可访问的解决方法咨询

你看到的是Source Map在起作用——它会把编译后的压缩代码映射回原始TypeScript源码，方便开发调试，但生产环境完全没必要保留，以下是几种解决方法：

• 禁用生产环境Source Map
  这是最直接的方案，关闭后浏览器就无法关联到原始TS文件了：

  • 如果用Vite构建：在vite.config.ts里设置build.sourcemap为false

    export default defineConfig({
      build: {
        sourcemap: false
      }
    })
    

  • 如果用Vue CLI构建：在vue.config.js里设置productionSourceMap为false

    module.exports = {
      productionSourceMap: false
    }
    

• 增强代码混淆与压缩
  生产环境构建工具默认会压缩代码，但可以通过配置进一步混淆变量名、移除调试代码，让即便有人拿到编译后的代码也难以阅读：
  以Vite为例，在vite.config.ts中配置Terser选项：

  export default defineConfig({
    build: {
      terserOptions: {
        compress: {
          drop_console: true, // 移除所有console.log等控制台输出
          drop_debugger: true, // 移除debugger语句
          pure_funcs: ['console.log'] // 指定要移除的函数
        },
        mangle: {
          toplevel: true, // 混淆顶层作用域的变量名
          keep_classnames: false, // 不保留类名
          keep_fnames: false // 不保留函数名
        }
      }
    }
  })
  

• 敏感逻辑移至后端
  注意：前端代码无论怎么混淆，都无法做到完全保密。如果有密钥、核心业务算法等敏感逻辑，一定要放在后端服务中，前端只通过API调用获取结果，不要把关键逻辑写在前端代码里。

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