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

Question

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

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

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

有办法实现吗？

Answer 1

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

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

Answer 2

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

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

npm run build

这将在 dist

中生成 1 个文件夹和 1 个文件

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

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

Answer 3

我能够通过使用配置文件使 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

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

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

Vue SPA - How to hide .vue files when rendered in browser

javascript

vue.js

server-side-rendering

vuejs2