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

Question

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

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

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

有没有办法做到这一点？

Answer 1

似乎您正在以vue的开发模式运行。当然，届时文件将是可见的。交付Vue SPA时，应将其构建并编译为JS块。

您可以通过运行来构建Spa的生产版本。

npm run build

这将在dist内部产生1个文件夹和1个文件

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

何时送达。没有.vue文件将不再可见。 并在Browsers Dev工具上进行检查时。它应该看起来像这样

Answer 2

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

app.js只能与属于JS可执行文件的文件位于该文件夹中。

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

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