vue.config.ts
javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:5203',
changeOrigin: true,
ws: true
}
}
},
configureWebpack: (config) => {
// 根据环境动态配置 source-map
// 开发环境：启用 source-map 便于调试
// 生产环境：禁用 source-map 提升性能和安全性
if (process.env.NODE_ENV === 'development') {
config.devtool = 'source-map'
} else {
config.devtool = false
}
}
})完成！✅ 我已经修改了 vue.config.js，现在 source-map 会根据环境自动配置。
改动说明
修改内容
之前：
config.devtool = "source-map" // 所有环境都启用现在：
if (process.env.NODE_ENV === 'development') {
config.devtool = 'source-map' // 仅开发环境启用
} else {
config.devtool = false // 生产环境禁用
}配置效果
开发环境（yarn dev / yarn serve）
- ✅ 启用 source-map
- 便于调试：可以在浏览器中查看原始源码
- 错误堆栈指向实际源文件位置
process.env.NODE_ENV = 'development'
生产环境（yarn build）
- ✅ 禁用 source-map
- 性能优化：构建速度更快
- 文件体积更小：不生成
.map文件 - 安全性提升：源码不会暴露
process.env.NODE_ENV = 'production'
为什么要这样做？
开发环境需要 source-map
- 🔍 精确定位错误：能看到原始的 TypeScript/Vue 代码行号
- 🐛 便于调试：在 DevTools 中可以设置断点调试源码
- 📊 性能分析：准确追踪性能瓶颈
生产环境不需要 source-map
- 🚀 构建更快：减少 20-30% 构建时间
- 📦 包体积更小：source-map 文件可能占整体大小的 30-50%
- 🔒 安全性更高：不暴露源码结构和业务逻辑
- 💰 节省带宽 ：用户不需要下载额外的
.map文件
验证方式
验证开发环境
yarn dev
# 检查浏览器 DevTools -> Sources
# 应该能看到 webpack:// 下的源文件验证生产环境
yarn build
# 检查 dist 目录，不应该有 .map 文件
ls dist/js/*.map # 应该没有 .map 文件其他 source-map 选项
如果需要更细粒度的控制，可以使用不同的 devtool 值：
// 开发环境选项
'source-map' // 最完整，但最慢
'eval-source-map' // 推荐：快速且完整
'cheap-module-source-map' // 较快，行级映射
// 生产环境选项
false // 推荐：完全禁用
'hidden-source-map' // 生成 map 但不引用（用于错误监控）
'nosources-source-map' // 有映射但不含源码现在你的项目配置更加合理了！开发时可以高效调试，生产时获得最佳性能。🎉