programing

vue에서 json 파일을 번들에서 제외합니다.

goodcopy 2022. 8. 11. 23:48
반응형

vue에서 json 파일을 번들에서 제외합니다.

Vue에서 번들되는 JSON 파일을 제외하려고 합니다.저는 이 답을 읽었지만 제가 하고 싶은 일을 하는데 별로 도움이 되지 않았습니다.

저는 Vue 프로젝트를 처음부터 만들었습니다.

vue create hello-world

그리고 나는 그것을 추가했다.import에서view파일Home.vue이제 다음과 같이 됩니다.

<template>
  <div>
   <div v-html="message"></div>
  </div>
</template>

<script>
import jsonData from '../assets/test.json'
export default {
  name: 'home',
  data () {
    return {
      message: jsonData
    }
  }
}
</script>

전체적인 프로젝트 구조는 바로 사용할 수 있으며 다음과 같습니다.

여기에 이미지 설명 입력

그래서 만약에 제가npm run build꽉 차다dist\js\app.ab0cf9cb.js이것은 예상되고 있으며, 나는 그것이 다른 파일에 저장되기를 원한다.dist폴더입니다.

제가 알기로는,externals 웹 팩에서 설정을 할 필요가 있습니다.즉, 이 경우,vue.config.js적절한 방법으로 수정하는 것입니다.

몇 가지 시도를 해봤는데vue.config.js예를 들어 다음과 같습니다.

module.exports = {
  configureWebpack: {
    externals: {
      jsonData: '../assets/test.json'
    }
  }
}

Import를 변경하다import jsonData from 'jsonData'하지만 운이 없다

질문입니다.정확히 무엇을 넣어야 하는지vue.config.js이 파일을 제외하시겠습니까?또는 이 파일을 제외하려면 어떻게 해야 합니까?

특정 요구에 따라서는 파일을 공용 폴더에 넣는 것이 가장 간단한 해결책일 수 있습니다.

웹 팩은 이것들을 처리하지 않고 폴더 구조를 유지하는 dist 폴더로 이동하기만 하면 됩니다.설정은 불필요합니다.

/public/assets/test.json

스태틱 자산에 대한 자세한 내용은http://https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/56695296/exclude-json-file-from-being-bundled-in-vue

반응형