Vue 3项目构建部署后用户可见.vue源文件，如何解决？

核心排查与解决步骤 #

1. 确认部署文件范围 #

检查你上传到托管平台的是否仅为vue-cli-service build生成的**dist目录**内容。如果误将项目根目录（包含src文件夹、.vue源码文件）一同部署，用户就能直接访问到源码。

• 部署前只打包并上传dist文件夹，不要包含项目源码文件。

2. 关闭生产环境Source Map #

Vue CLI默认在生产环境会生成Source Map，浏览器开发者工具可能通过它映射回.vue源码。需彻底关闭：
在项目根目录的vue.config.js中添加配置：

module.exports = {
  productionSourceMap: false
}

修改后重新执行vue-cli-service build，再部署新生成的dist文件。

3. 检查Vue Router懒加载配置 #

确保懒加载写法符合生产环境规范，避免意外暴露源码路径：
正确的懒加载示例：

const Home = () => import('../views/Home.vue')

无需额外特殊配置，保证Webpack正确打包分割代码，不会泄露源码结构。

4. 清理托管平台缓存并配置访问规则 #

部分托管平台会缓存旧构建文件，或允许访问未限制的路径：

• 清理平台缓存，重新部署最新的dist文件。
• 配置平台静态文件访问规则，仅允许访问dist目录下的文件，禁止访问根目录的其他路径（若误部署了源码）。

验证方法 #

部署完成后，打开浏览器开发者工具的Sources面板，搜索.vue文件确认无法找到；同时在地址栏尝试直接访问源码路径（如/src/views/Home.vue），应返回404。

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