Exclude json file from being bundled in Vue

Question

I'm trying to exclude JSON file from being bundled in Vue. I read this answer but it didn't really helped me to do what I want to do.

I created a Vue project from scratch:

vue create hello-world

and I added an import in the view file Home.vue so now it looks like this:

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

and overall project structure is out of the box and looks like this:

So, if I'll use npm run build it gets packed into dist\js\app.ab0cf9cb.js which is expected and I want it to stay separate file in the dist folder.

As far as I understand I need to use externals configuration from webpack, which in my case means I need to create a vue.config.js and modifying it in the proper way.

I did try a few things with vue.config.js, for example:

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

and changing an import to be import jsonData from 'jsonData' but no luck

My question is: What exactly I should put into vue.config.js to exclude this file? Or, to be more generic, what should I do to exclude this file?

Answer 1

Depending on what your specific needs are the simplest solution may be to just put the file in the public folder.

Webpack wont process these, but simply move them to the dist folder maintaining the folder structure. No configuration needed.

/public/assets/test.json

See more info on static assets https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder