Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件 [英] Vue SPA - How to hide .vue files when rendered in browser

问题描述

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

I'm working on a Single Page App developed in Vue.js hosted on a node.js server.

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

At the moment it is still under development but eventually it will be exposed to external customers, and since we will deal with sensitive data we would like to avoid to have the .vue files and the relative file-tree structure visible when users inspect the element in devtool.

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

See attached screenshot as a sample that shows the files I would like to hide.

有没有办法做到这一点?

Is there a way to achieve that?

推荐答案

通过使用配置文件，我能够让 webpack 将 SPA 打包导出.

I was able to make webpack export the SPA in a bundle by playing around with the config file.

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

In the file ./config/index.js I have changed the following flags:

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

I've found the solution by reading the webpack documentation where it explains what the settings do: https://webpack.js.org/configuration/devtool/#production

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

Thanks everyone for putting me in the right direction.

这篇关于Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！