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 谢谢，我学习一下。

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 我试了下，的确可以了。
昨天死活不行，编译就出错。
现在就用这个标准的写法就通过了。
created() {
fetch('views/home.json').then(res => res.json())
.then(json => { this.message = json.members }) },

再额外请教一个问题，我在 pc 端的 chrome，及 chrome 模拟的 mobile 页面都能成功显示，但是在 ios 的 safari/chrome 中都载入失败（一片空白），移动端请求桌面模式也一样空白。请问移动端有没有什么查看工具？（ xcode 好像可以连移动 safari 但太绕了）

[SilentDepth]

Mac 上 Safari 就可以连接 iOS 开启开发者工具

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 好的，我去试试。

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 找到原因了，挺诡异的，是 safari 不认 util.js 开头的正则表达式。
搜了一下可能是这个原因，不认后视。第一次碰到，等会儿改了看看。

[javascript - Works in Chrome, but breaks in Safari: Invalid regular expression: invalid group specifier name /(?<=\/)([^#]+)(?=#*)/ - Stack Overflow]( https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group)

[SilentDepth]

@JCZ2MkKb5S8ZX9pq #24 https://caniuse.com/#feat=js-regexp-lookbehind

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 的确我 mac 的 safari 也不认 lookbehind，测起来倒方便了。。。
后来加了一步，先找再替换了。

[JCZ2MkKb5S8ZX9pq]

@SilentDepth 发现那个 httpVueLoader 只认 module.export，改了一下之后这个也跑通了，而且它好像默认解决了 safari 的问题。考虑到这个 js 有可能长期维护，转用这个了。