【问题标题】:ReferenceError: axios is not definedReferenceError: axios 未定义
【发布时间】:2019-12-18 11:49:11
【问题描述】:

screenshot of browser developer tool - network

我已将脚本包含到我的 base.pug 文件中

脚本(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

当我加载页面并检查浏览器开发者工具 > 网络时,所有其他引导文件、jquery 文件等均已加载,但 axios.min.js 未加载。

当我执行如下代码所示的 login.js 时,控制台中出现“Axios 未定义”错误。

希望有人能给我一些提示和指导。

我已尝试将脚本放在 base.pug 页面的顶部,我已检查任何语法错误等。我已尝试使用替代链接 https://unpkg.com/axios/dist/axios.min.js - 不断收到相同的错误。

base.pug 文件

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer

        // FOOTER
        include _footer

script(src='/js/login.js') 
script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')

login.js 文件

doctype html
html(lang='en')
    head
        block head     
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0')
            meta(http-equiv='X-UA-Compatible' content='ie=edge')
            link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf' crossorigin='anonymous')
            link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
            link(rel='stylesheet' href='/css/style.css')
            link(rel='icon' type='image/ico' href='/img/favicon.ico')

            title Sales App #{title}

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer

    script(src='/js/login.js') 
    script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

    script(
    src='https://code.jquery.com/jquery-3.4.0.min.js'
    integrity='sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg='
    crossorigin='anonymous')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')

ReferenceError: axios 未定义 登录时 (login.js:7) 在 HTMLFormElement。 (login.js:26)

【问题讨论】:

  • axios.js之后移动login.js

标签: javascript express axios pug


【解决方案1】:

在所有 cdns 之后移动您的脚本,因为您的脚本将在它们之前加载,从而在加载脚本时使它们未定义。

base.pug

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer

        // FOOTER
        include _footer

script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')
script(src='/js/login.js') 

login.js

doctype html
html(lang='en')
    head
        block head     
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0')
            meta(http-equiv='X-UA-Compatible' content='ie=edge')
            link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf' crossorigin='anonymous')
            link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
            link(rel='stylesheet' href='/css/style.css')
            link(rel='icon' type='image/ico' href='/img/favicon.ico')

            title Sales App #{title}

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer


    script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

    script(
    src='https://code.jquery.com/jquery-3.4.0.min.js'
    integrity='sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg='
    crossorigin='anonymous')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')
    script(src='/js/login.js') 

【讨论】:

  • 感谢您的回复。我尝试将脚本(src='/js/login.js)移动到底部 - 仍然是同样的错误。我还尝试删除所有引导程序和 jquery 脚本。只加载 axios 和 login.js - 也会得到同样的错误。尝试清除浏览器上的缓存,重新启动服务器 - 仍然出现相同的错误。
  • 我在另一个项目文件夹中尝试了脚本 - 它能够加载。我想我只是将代码迁移到一个新的项目文件夹,看看它是否能解决问题。
  • 你是在尝试使用的文件中导入 axios 吗?
  • 感谢您的帮助。我设法解决了这个问题。这是由于加载引导程序的脚本中有一些额外的间距。不确定这是否是原因,因为我曾尝试删除所有用于下载引导程序的脚本,但它不起作用..现在它突然起作用了。无论如何,案件已结案。
【解决方案2】:

当时您在加载 axios 程序包期间由于输入错误而出现错误,应该是 src,而不是 scr

你的样本

script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

应该是

script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

我意识到很长一段时间过去了,但对未来的读者应该有用。

【讨论】:

    猜你喜欢
    • 2019-05-13
    • 2012-08-24
    • 2015-10-04
    • 2017-04-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多