关于在HTML里引入vue报错问题

112 阅读1分钟

报错内容

image.png

原代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue语法练习</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>用户名{{username}}</h1>
            <div v-if="ifVis">213</div>
            <button v-on:click="changeVis">按我</button>
        </div>
    </body>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                username:'小明',
                ifVis:true
            },
            methods:{
                changeVis(){
                    this.ifVis = !this.ifVis;
                }
            }
        })
    </script>
</html>

呈现内容

image.png

出现原因

域名无法访问。

解决方案

把引用内容域名改为国内地址即可,如:

    https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js
    https://unpkg.zhimg.com/vue-router@3.3.4/dist/vue-router.js
    https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js
    https://unpkg.zhimg.com/axios@0.19.2/dist/axios.min.js

在上述代码中我使用了vue2的生产版本也可以使用,但是生产版本没有告警功能,所以需要谨慎使用。

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

还有一种就是直接去官网下载后引入即可

image.png