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

Question

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

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?

Answer 1

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

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...
}

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.

Answer 2

It seems you are running on development mode of vue. And Of course files will be visible by then. When shipping a Vue SPA, it should be build and compiled into chunks of JS.

You can build a production version of your spa by running.

npm run build

This will produce 1 folder and 1 file inside the dist

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

When this were served. No .vue files will be visible anymore. And when you check it on Browsers Dev tools. It should look more like of this