Vue 如果纯写静态站的话，怎么在单文件组件里载入 json？

[JCZ2MkKb5S8ZX9pq]

• 一个有若干展示子页面的静态站点。目前参考的是这篇
  在静态页面中使用 Vue.js - A_ning - 博客园

• 因为想用 vue-router，所以子页面好像都必须用单文件 component 来写。

• 现在卡在单个.vue 组件文件里，载入 json 的这步。找到的范例都是

  import xxx from xxx.json
  

  但静态页面好像这么写不行。（没有用 cli 啥的）

• 小白入门不知道何从下手了，有高手路过麻烦指点一下。

[toesbieya]

http-vue-loader

[JCZ2MkKb5S8ZX9pq]

@toesbieya 我去搜看看

[JCZ2MkKb5S8ZX9pq]

@toesbieya 看了下，vue 文件的模块解析是已经有了。
现在等于是 export 的数据，怎么异步等 json 载入完再返出来的问题，现在我看那个例子里好像是不行。
请问这个 http-vue-loader 可以吗？还是它直接就能识别 import 语句？

[toesbieya]

@JCZ2MkKb5S8ZX9pq ajax 不行吗

[JCZ2MkKb5S8ZX9pq]

@toesbieya 试了下好像不行，可能是现在那个 parser 的问题。在<script>的 export 前加变量也会出问题，载入外部 css 文件也失败了。我等下试试你说的这个。

[JCZ2MkKb5S8ZX9pq]

@toesbieya 另外现在那个 parser 认 template 也卡过一个问题。
一开始我写 template>div1,div2 兄弟级的就不行，一定要 template>div#frame>div1,div2 这样先套到一个 div 里，这个是 template 的规定还是它自己 parser 的特例啊？我好像教程也没看到这部分。

[finalwave]

试了一下，fetch("data.json").then(res=>res.json()).then(data=>{/*处理数据*/}) 可以获取 json 数据

[JCZ2MkKb5S8ZX9pq]

@finalwave 嗯，直接在 html 里 fetch 是可以的，但不编译直接 parser 好像就不行了。我本来先撸了个首页，就是用的 create > fetch，然后一路直接赋值是可以的。
而且发现我看的那个范例，在 PC 端 chrome 下模拟 mobile 显示得出，到 iOS 真机显示都显示不出了。

感觉要踩的坑还挺多的，有空再从头看看 npm 啥的。
打算先放弃 router，直接先单文件走 href 直接跳转，先跑起来再说了。
之前写过几个小程序，感觉页面跳转简单点。component/template 也没碰到这些问题，看来还需要摸索。

[mxT52CRuqR6o5]

看上去应该是需要折腾一下 webpack 配置

[SilentDepth]

我没明白，你是要加载一个 JSON （数据）还是一个 vue （组件）？

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 是想在组件里加载 json，而且是静态页不编译的写法。

[SilentDepth]

@JCZ2MkKb5S8ZX9pq #11 为什么直接 fetch 会出问题？报错信息是什么？

[JCZ2MkKb5S8ZX9pq]

直接在单文件里 fetch 是放在 created 里面的，但在组件里是直接返回 data，不知道怎么异步，返回的是函数不是处理后的结果。
另外上面提到的两个 parser，一个是我提到的范例，一个是一楼提到的，我记得在解析的时候就直接报错了，可能是不支持。

[JCZ2MkKb5S8ZX9pq]

其实最简单的测试就是我提到的那个范例，文章最后含一个 zip 打包范例。
https://files.cnblogs.com/files/aning2015/VueTest.zip
（不知道有没有防盗链）

把里面的 views/menu 拿一个出来改改看，加载一个 json 试试就知道了。
文件很少，比我解释起来更清晰，毕竟这个用法有点特殊。

[SilentDepth]

@JCZ2MkKb5S8ZX9pq #14 这个链接禁止访问 = =

我还是没明白你的需求，最好发个代码出来，JSFiddle 或者 CodeSandbox 都行

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 那从最上面我博客园提到的那个文章里就能看到了。反正是挺搞的一个问题，看代码比较清晰。

[SilentDepth]

@JCZ2MkKb5S8ZX9pq #16 那篇文章的源码包我下载了，做了如下更改：

[/data.json] （新增文件）
{ "msg": "hello world" }

[/views/menu1.html]
exports = {
...
async created () {
this.message = (await fetch('/data.json').then(res => res.json())).msg
},
}

一切正常啊，页面内容也顺利地更新了。所以我还是没明白你的问题在哪 = =

[SilentDepth]

V2EX 这帖子内容被系统修改的厉害……非得做这么多修改吗，又不是啥敏感内容 = =

[SilentDepth]

代码修改截图：

https://global.cdn.mikupics.cn/2020/06/11/a7ac7dfff0451.png

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 谢谢，我学习一下。