Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件

Question

我正在开发一个使用 Vue.js 开发的单页应用程序，托管在 node.js 服务器上。

目前它仍在开发中，但最终它将暴露给外部客户，并且由于我们将处理敏感数据，因此我们希望避免 .vue 文件和相关文件树结构在用户可见时检查 devtool 中的元素。

请参阅随附的屏幕截图作为示例，其中显示了我想要隐藏的文件。

有没有办法做到这一点？

Answer 1

通过使用配置文件，我能够让 webpack 将 SPA 导出为捆绑包。

在文件./config/index.js 中我更改了以下标志：

build: {
    // other code...

    devtool: '',  // Previously it was set as '#source-map'
    productionSourceMap: false, // Previously it was set as true
    cssSourceMap: false, // Previously set as true

    // other code...
}

我通过阅读 webpack 文档找到了解决方案，其中解释了设置的作用：https://webpack.js.org/configuration/devtool/#production

感谢大家为我指明了正确的方向。

Answer 2

看来你是在 vue 的开发模式下运行的。当然，届时文件将可见。发布 Vue SPA 时，应将其构建并编译成 JS 块。

您可以通过运行来构建您的水疗中心的生产版本。

npm run build

这将在 dist 中生成 1 个文件夹和 1 个文件

--dist
----static
----index.html

上菜的时间。没有 .vue 文件将不再可见。 当您在浏览器开发工具上检查它时。它应该看起来更像这样

Answer 3

文件夹node_modules、src 和theme 应在文件夹结构中上一级。因此，您必须修改指向这些文件的路径。

app.js 只能在该文件夹中包含 JS 可执行文件。