Vue.js动态拼接路径import JSON文件报Unexpected token错误如何解决

ES 规范里的静态import语句是编译时解析的，不支持运行时通过表达式拼接路径。Vue项目所用的构建工具（Vite/Webpack）在打包阶段就需要定位到所有依赖的静态资源，你写的路径拼接逻辑要等到页面运行时才能算出最终结果，不符合静态import的语法规则，所以解析阶段直接在加号位置抛错。
当你传入完整固定的字符串路径时，构建工具可以直接定位到目标JSON文件，完成打包和依赖注入，所以代码可以正常运行。

根据项目使用的构建工具和业务场景，选以下任意一种方案即可：

• 动态import() 通用方案（兼容Vite、Webpack）
  动态import是ES规范支持的运行时导入方式，注意必须写死文件所在的目录前缀，给构建工具明确的文件查找范围，不能全路径动态拼接，否则构建工具无法识别需要打包哪些文件：

  // 先获取地址参数
  const postId = new URL(location.href).searchParams.get('id')
  // 动态导入对应json
  import(`@/posts/posts/${postId}.json`).then(mod => {
    const content = mod.default // JSON模块的默认导出就是解析完成的JS对象
    // 在这里写后续使用content的业务逻辑
  })
  

  如果是async函数环境，可以用async/await简化写法：

  const loadPost = async (id) => {
    return (await import(`@/posts/posts/${id}.json`)).default
  }
  

• Vite项目预加载方案（适合JSON文件总量不大的场景）
  用import.meta.glob在构建阶段把目标目录下所有JSON文件提前导入，生成路径和内容的映射表，运行时直接查表取值即可，没有动态加载的延迟：

  // eager: true 表示构建时直接加载所有匹配文件，不做按需拆分
  // import: 'default' 表示直接取JSON模块的默认导出，不用额外取.default
  const allPosts = import.meta.glob('@/posts/posts/*.json', {
    eager: true,
    import: 'default'
  })
  const postId = new URL(location.href).searchParams.get('id')
  // 注意glob返回的key是文件完整路径，需要和自己的目录配置匹配，可先打印allPosts确认key格式
  const content = allPosts[`/src/posts/posts/${postId}.json`]
  

• Webpack项目预加载方案
  逻辑和Vite的glob方案一致，用require.context预加载目录下所有JSON：

  const postContext = require.context('@/posts/posts/', false, /\.json$/)
  const postId = new URL(location.href).searchParams.get('id')
  const content = postContext(`./${postId}.json`)
  

注意：不要尝试把整个导入路径写成纯动态变量（比如import(someFullPathVar)），这种写法构建工具无法确定查找范围，会直接导致打包失败。

内容的提问来源于stack exchange，提问作者Pisoj