Исключить файл JSON из пакета в Vue

Question

Я пытаюсь исключить файл JSON из пакета Vue. Я прочитал этот ответ , но это не помогло мне сделать то, что я хочу.

Я создал проект 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 jsonData from 'jsonData', но не повезло

Мой вопрос: Что именно я должен поместить в vue.config.js, чтобы исключить этот файл? Или, чтобы быть более общим, что я должен сделать, чтобы исключить этот файл?

Answer 1

В зависимости от ваших конкретных потребностей, самое простое решение - просто поместить файл в общую папку.

Webpack не будет обрабатывать их, а просто перемещает их в папку dist, сохраняя структуру папок.Конфигурация не требуется.

/public/assets/test.json

Подробнее о статических активах https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder