Vue 如果纯写静态站的话，怎么在单文件组件里载入 json？
JCZ2MkKb5S8ZX9pq · 2020-06-10 21:45:31 +08:00 · 1929 次点击这是一个创建于 1625 天前的主题，其中的信息可能已经有所发展或是发生改变。
-
一个有若干展示子页面的静态站点。目前参考的是这篇
在静态页面中使用 Vue.js - A_ning - 博客园 -
因为想用 vue-router，所以子页面好像都必须用单文件 component 来写。
-
现在卡在单个.vue 组件文件里，载入 json 的这步。找到的范例都是
import xxx from xxx.json但静态页面好像这么写不行。（没有用 cli 啥的）
-
小白入门不知道何从下手了，有高手路过麻烦指点一下。
 |
1
toesbieya 2020-06-10 21:50:39 +08:00
http-vue-loader
|
 |
2
JCZ2MkKb5S8ZX9pq OP @toesbieya 我去搜看看
|
|
3
JCZ2MkKb5S8ZX9pq OP @toesbieya 看了下，vue 文件的模块解析是已经有了。
现在等于是 export 的数据，怎么异步等 json 载入完再返出来的问题，现在我看那个例子里好像是不行。 请问这个 http-vue-loader 可以吗？还是它直接就能识别 import 语句？ |
|
4
toesbieya 2020-06-10 22:03:05 +08:00
@JCZ2MkKb5S8ZX9pq ajax 不行吗
|
|
5
JCZ2MkKb5S8ZX9pq OP @toesbieya 试了下好像不行，可能是现在那个 parser 的问题。在<script>的 export 前加变量也会出问题，载入外部 css 文件也失败了。我等下试试你说的这个。
|
|
6
JCZ2MkKb5S8ZX9pq OP @toesbieya 另外现在那个 parser 认 template 也卡过一个问题。
一开始我写 template>div1,div2 兄弟级的就不行，一定要 template>div#frame>div1,div2 这样先套到一个 div 里，这个是 template 的规定还是它自己 parser 的特例啊？我好像教程也没看到这部分。 |
 |
7
finalwave 2020-06-10 23:03:03 +08:00
试了一下，fetch("data.json").then(res=>res.json()).then(data=>{/*处理数据*/}) 可以获取 json 数据
|
|
8
JCZ2MkKb5S8ZX9pq OP @finalwave 嗯，直接在 html 里 fetch 是可以的，但不编译直接 parser 好像就不行了。我本来先撸了个首页，就是用的 create > fetch，然后一路直接赋值是可以的。
而且发现我看的那个范例，在 PC 端 chrome 下模拟 mobile 显示得出，到 iOS 真机显示都显示不出了。 感觉要踩的坑还挺多的，有空再从头看看 npm 啥的。 打算先放弃 router，直接先单文件走 href 直接跳转，先跑起来再说了。 之前写过几个小程序，感觉页面跳转简单点。component/template 也没碰到这些问题，看来还需要摸索。 |
 |
9
mxT52CRuqR6o5 2020-06-11 05:41:46 +08:00 via Android
看上去应该是需要折腾一下 webpack 配置
|
 |
10
SilentDepth 2020-06-11 10:08:19 +08:00
我没明白，你是要加载一个 JSON （数据）还是一个 vue （组件）？
|
|
11
JCZ2MkKb5S8ZX9pq OP @SilentDepth 是想在组件里加载 json，而且是静态页不编译的写法。
|
|
12
SilentDepth 2020-06-11 13:46:54 +08:00
@JCZ2MkKb5S8ZX9pq #11 为什么直接 fetch 会出问题？报错信息是什么？
|
|
13
JCZ2MkKb5S8ZX9pq OP 直接在单文件里 fetch 是放在 created 里面的，但在组件里是直接返回 data，不知道怎么异步，返回的是函数不是处理后的结果。
另外上面提到的两个 parser，一个是我提到的范例，一个是一楼提到的，我记得在解析的时候就直接报错了，可能是不支持。 |
|
14
JCZ2MkKb5S8ZX9pq OP 其实最简单的测试就是我提到的那个范例，文章最后含一个 zip 打包范例。
https://files.cnblogs.com/files/aning2015/VueTest.zip （不知道有没有防盗链） 把里面的 views/menu 拿一个出来改改看，加载一个 json 试试就知道了。 文件很少，比我解释起来更清晰，毕竟这个用法有点特殊。 |
|
15
SilentDepth 2020-06-11 15:14:04 +08:00
|
|
16
JCZ2MkKb5S8ZX9pq OP @SilentDepth 那从最上面我博客园提到的那个文章里就能看到了。反正是挺搞的一个问题，看代码比较清晰。
|
|
17
SilentDepth 2020-06-11 15:54:35 +08:00  1
@JCZ2MkKb5S8ZX9pq #16 那篇文章的源码包我下载了，做了如下更改：
[/data.json] （新增文件） { "msg": "hello world" } [/views/menu1.html] exports = { ... async created () { this.message = (await fetch('/data.json').then(res => res.json())).msg }, } 一切正常啊，页面内容也顺利地更新了。所以我还是没明白你的问题在哪 = = |
|
18
SilentDepth 2020-06-11 15:55:22 +08:00
V2EX 这帖子内容被系统修改的厉害……非得做这么多修改吗，又不是啥敏感内容 = =
|
|
19
SilentDepth 2020-06-11 16:03:54 +08:00 1
|
|
20
JCZ2MkKb5S8ZX9pq OP @SilentDepth 谢谢，我学习一下。
|
|
21
JCZ2MkKb5S8ZX9pq OP @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 但太绕了） |
|
22
SilentDepth 2020-06-11 17:49:19 +08:00 1
Mac 上 Safari 就可以连接 iOS 开启开发者工具
|
|
23
JCZ2MkKb5S8ZX9pq OP @SilentDepth 好的，我去试试。
|
|
24
JCZ2MkKb5S8ZX9pq OP @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) |
|
25
SilentDepth 2020-06-11 21:10:13 +08:00 1
|
|
26
JCZ2MkKb5S8ZX9pq OP @SilentDepth 的确我 mac 的 safari 也不认 lookbehind，测起来倒方便了。。。
后来加了一步，先找再替换了。 |
|
27
JCZ2MkKb5S8ZX9pq OP @SilentDepth 发现那个 httpVueLoader 只认 module.export，改了一下之后这个也跑通了，而且它好像默认解决了 safari 的问题。考虑到这个 js 有可能长期维护，转用这个了。
|
Select Language