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

user_4603295 0
Viewed 3843

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. enter image description here

Is there a way to achieve that?

vuejs2 server-side-rendering vue.js javascript
3 Answers

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.

user_46032950

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

enter image description here

user_38674900

The folders node_modules, src, and theme should be a level up in the folder structure. Therefore, you have to modify your paths pointing to those files.

The app.js can be in that folder only with files that are JS executables.

user_11080980
Related