Vue 3.0 导入不是静态的？答案

【问题标题】：Vue 3.0 import not static?Vue 3.0 导入不是静态的？
【发布时间】：2021-02-25 15:51:33
【问题描述】：

我正在构建我的第一个 vue 前端，我刚刚发现当我通过 import 语句导入 json 文件时，它们在构建中是固定的，不能是“动态的”。例如：

...
// youtube channel info fetched and cached by PHP
import channel from '@/../public/cache/channel.json' 
import playlists from '@/../public/cache/playlists/' 

export default {
  name: 'Home',
  components: {
    configuration, channel, playlists
  },
  data(){
    console.log(configuration)
    console.log(channel)
    console.log(playlists)
    return{
      configuration, channel, playlists
    }
  }
}

其中播放列表加载包含播放列表（由 PHP 生成的文件）的 index.js：

import PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG from './playlist-PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG.json'
...
export default{
PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG,...}

我的想法是，如果我进行构建，我仍然能够在服务器和 Vue 上生成这些文件。生成的代码将引用它们 - 不幸的是，情况并非如此，我必须了解 vue 在构建期间导入所有导入一对一修复（名称所说的显然是的）并将它们组合在相应的 js 文件中，这使我无法在之后链接另一个频道或映射到新的视频/播放列表。

是否甚至可以通过导入“保持动态”，或者我是否必须通过 axios 或其他方式获取 json（即使文件位于同一主机上）？

【问题讨论】：

如果服务器频繁更改数据，客户端需要获取新数据。
我的计划是在页面加载时通过 php 执行此操作（如果本地缓存文件不存在或太旧，php 通过 curl 获取频道和播放列表）但是看起来我必须重新考虑整个现在构造

标签： vue.js import

【解决方案1】：

您必须为此使用 Axios/fetch...

导入确实是静态的 - 导入文件的内容包含在应用程序包中（在构建时）

有一种叫做dynamic imports 的东西，但它是一种旨在“仅在需要时加载所需内容”的技术。导入的内容仍然在构建时确定（在构建时 webpack 准备将在运行时加载的文件）

因此，如果您希望内容是动态的，在运行时加载到应用程序中，唯一的解决方案是使用 Axios/fetch 并将数据保留在应用程序本身的“外部”...

【讨论】：