简体   繁体   English

VueJS 无法在 MacOS(Safari 和 Chrome)上呈现

[英]VueJS doesn't render on MacOS (Safari and Chrome)

I have a weird problem.我有一个奇怪的问题。 My VueJS app (from CDN) uses Vuetify .我的VueJS应用程序(来自 CDN)使用Vuetify

It works on Ubuntu and Windows, but my client sees the raw VueJS code on his Safari and also on Chrome on the iPad.它适用于 Ubuntu 和 Windows,但我的客户在他的 Safari 和 iPad 上的 Chrome 上看到了原始 VueJS 代码。 Do you know where is the problem?你知道问题出在哪里吗?

The simplified code looks like this:简化后的代码如下所示:

<!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>

It sounds like your CDN or server may be misconfigured.听起来您的 CDN 或服务器可能配置错误。 It might be worth checking out the HTTP "Content-Type" headers to make sure it is sending out the right MIME type.检查 HTTP“Content-Type”标头以确保它发送正确的 MIME 类型可能是值得的。 You could examine this in chrome dev tools, by clicking on the network tab.您可以通过单击网络选项卡在 chrome 开发工具中检查这一点。

Chrome on iOS actually is based on WebKit, so it is running the same engine as Safari and their similar behavior should not be surprising. iOS 上的 Chrome 实际上是基于 WebKit 的,因此它运行与 Safari 相同的引擎,它们的类似行为应该不足为奇。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM