Vue SPA - Как скрыть файлы .vue при рендеринге в браузере

Question

Я работаю над одностраничным приложением, разработанным в Vue.js, которое размещено на сервере node.js.

В настоящее время оно все еще находится в стадии разработки, но в конечном итоге будет доступно внешним клиентам, ипоскольку мы будем работать с конфиденциальными данными, нам бы хотелось, чтобы файлы .vue и относительная структура файлового дерева не отображались, когда пользователи проверяют элемент в devtool.

См. прикрепленный снимок экрана в качестве образца, показывающего файлыЯ хотел бы спрятаться.

Есть ли способ достичь этого?

Answer 1

Кажется, вы работаете в режиме разработки vue. И, конечно, файлы будут видны к тому времени. При отправке Vue SPA его следует собирать и компилировать в куски JS.

Вы можете создать рабочую версию своего спа, запустив.

npm run build

Это даст 1 папку и 1 файл внутри dist

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

Когда это было подано. Файлы .vue больше не будут видны. И когда вы проверяете это на инструментах Dev для браузеров. Это должно выглядеть примерно так

Answer 2

Мне удалось заставить 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...
}

Я нашел решение, прочитав документацию веб-пакета, где объясняется, что делают настройки: https://webpack.js.org/configuration/devtool/#production

Спасибо всем за то, что направили меня в правильном направлении.

Answer 3

Папки node_modules, src и theme должны находиться на одном уровне в структуре папок.Поэтому вам необходимо изменить пути, указывающие на эти файлы.

Файл app.js может находиться в этой папке только с файлами, которые являются исполняемыми файлами JS.