如何在非CLI的Vue 3项目中配置Axios包

第一步：正确引入Axios CDN #

在页面头部的Vue脚本之后，添加Axios的CDN引入脚本，Axios会自动在全局暴露axios变量：

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- 新增Axios的CDN引入 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第二步：修正代码中的语法与逻辑错误 #

你的代码存在几处关键错误，以下是修正后的完整代码：

<div id="demo" class="min-h-full bg-gray-200">
  <!-- 添加输入框用于触发回车查询 -->
  <input type="text" placeholder="输入邮编按回车查询" @keyup="getData" class="p-2 m-4 rounded">
</div>

<script>
const { onMounted, ref } = Vue
const app = Vue.createApp({
  setup() {
    // 响应式变量必须声明在setup内部
    const cities = ref('')
    
    const getData = async (e) => {
      // 兼容页面加载调用和回车触发两种场景
      if (!e || e.key === "Enter") {
        try {
          const res = await axios.get(
            `https://api.openweathermap.org/data/2.5/weather?zip={enterzipcodehere},US&appid={youropenweathermapidhere}&units=imperial`
          )
          cities.value = res.data.name
          console.log(cities.value)
        } catch (error) {
          console.error('请求失败:', error)
        }
      }
    }

    onMounted(() => {
      // 页面加载时调用getData
      getData()
    })

    // 返回模板需用到的变量和方法
    return {
      cities,
      getData
    }
  }
})
app.mount('#demo')
</script>

关键错误说明 #

• 不能通过const { axios } = "URL"的方式引入包，这是错误语法，必须用<script>标签引入CDN资源。
• Vue3的响应式变量（如ref声明的变量）必须放在setup函数内部，否则无法被组件识别。
• setup是组件选项的一部分，必须写在Vue.createApp()的参数对象里，不能单独写在外面。
• onMounted的回调函数缺少闭合括号，会导致语法错误。
• 页面加载时调用getData()没有传入事件对象e，需在getData里兼容无e的情况，否则会出现Cannot read property 'key' of undefined错误。
• 模板中要用到的变量和方法，必须在setup函数末尾返回，否则无法在模板中访问。

内容的提问来源于stack exchange，提问作者JS_is_awesome18