Vue单页应用 - 如何在浏览器渲染时隐藏.vue文件

Question

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

目前仍在开发阶段，但最终将向外部客户公开。由于我们将处理敏感数据，因此我们希望在用户检查开发工具元素时避免显示.vue文件和相关文件树结构。

附带的屏幕截图显示了我想要隐藏的文件。请参考以下链接： 有没有办法实现这一点？

- Adriano

---

已经有一个讨论相同主题的话题了。 - Hamilton Gabriel

谢谢，Hamilton，我会看一下的 :) - Adriano

希望它能够正常工作。 - Hamilton Gabriel

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

感谢各位将我引导到正确的方向。

- Adriano

Answer 2

看起来你正在运行Vue的开发模式。当然，在这种情况下，文件是可见的。在发布Vue SPA时，它应该被构建和编译为JS代码块。

你可以通过运行以下命令构建生产版本的SPA。

npm run build

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

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

当此服务启动时，.vue文件将不再可见。 并且在浏览器开发工具中检查时，它应该更像这样

- keysl

Answer 3

文件夹 node_modules、src 和 theme 应该在文件夹结构中向上一级。因此，您必须修改指向这些文件的路径。 app.js 只能与 JS 可执行文件放在同一个文件夹中。

- jordiburgos