![](/img/trans.png)
[英]Countdown timer doesn't render right on Chrome/Safari, but OK on Firefox
[英]VueJS doesn't render on MacOS (Safari and Chrome)
我有一个奇怪的问题。 我的VueJS
应用程序(来自 CDN)使用Vuetify
。
它适用于 Ubuntu 和 Windows,但我的客户在他的 Safari 和 iPad 上的 Chrome 上看到了原始 VueJS 代码。 你知道问题出在哪里吗?
简化后的代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.js"
integrity="sha512-nqIFZC8560+CqHgXKez61MI0f9XSTKLkm0zFVm/99Wt0jSTZ7yeeYwbzyl0SGn/s8Mulbdw+ScCG41hmO2+FKw=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fluid>
....
</v-container>
</v-main>
</v-app>
</div>
<script>
class RepairsCalculator {
...
}
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
vuetify: new Vuetify(),
data: {
...........
}
})
</script>
</body>
</html>
听起来您的 CDN 或服务器可能配置错误。 检查 HTTP“Content-Type”标头以确保它发送正确的 MIME 类型可能是值得的。 您可以通过单击网络选项卡在 chrome 开发工具中检查这一点。
iOS 上的 Chrome 实际上是基于 WebKit 的,因此它运行与 Safari 相同的引擎,它们的类似行为应该不足为奇。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.