Vue SPA - 브라우저에서 렌더링할 때 .vue 파일을 숨기는 방법

Vue SPA - 브라우저에서 렌더링할 때 .vue 파일을 숨기는 방법

node.js 서버에서 호스트되는 Vue.js에서 개발된 Single Page App을 작업하고 있습니다.

현시점에서는 아직 개발 중이지만, 최종적으로는 외부 고객에게 공개됩니다.또한 기밀 데이터를 취급하기 때문에 사용자가 devtool에서 요소를 검사할 때 .vue 파일과 관련 파일 트리 구조가 보이는 것은 피하고 싶습니다.

첨부한 스크린샷은 숨기고 싶은 파일을 보여주는 샘플입니다.

그것을 달성할 수 있는 방법이 있습니까?

컨피규레이션파일을 가지고 노는 것으로, Webpack으로 SPA를 번들로 export 할 수 있었습니다.

파일 내./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

저를 올바른 방향으로 인도해 주셔서 모두 감사합니다.

vue의 개발 모드로 실행 중인 것 같습니다.그리고 물론 그 때쯤이면 파일이 보일 것이다.Vue SPA를 출하할 때는 빌드하여 JS의 청크로 컴파일해야 합니다.

실행함으로써 스파의 실제 버전을 구축할 수 있습니다.

npm run build

그러면 dist 내부에 폴더 1개와 파일 1개가 생성됩니다.

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

이게 나왔을 때..vue 파일은 더 이상 표시되지 않습니다.브라우저 개발 도구에서 확인할 수 있습니다.이렇게 생겼으면 좋겠어

폴더node_modules,src,그리고.theme폴더 구조의 레벨 업이어야 합니다.따라서 이러한 파일을 가리키는 경로를 수정해야 합니다.

app.js는 JS 실행 파일이 있는 폴더에만 있을 수 있습니다.

언급URL : https://stackoverflow.com/questions/53310750/vue-spa-how-to-hide-vue-files-when-rendered-in-browser