打开当前项目,在当前项目下执行以下命令安装
npm install axios
我的接口地址是:http://t.weather.itboy.net/api/weather/city/101030100
我在vite.config.js
中添加以下代码
server: {
proxy: {
//"/api": "http://t.weather.itboy.net/",
//对以/api开头的请求进行代理
"/api": {
// 代理的目标地址
target: "http://t.weather.itboy.net/",
//设置允许跨域
changeOrigin: true,
// 路径重写
rewrite: (path) => path.replace(/^/api/, ""),
},
},
},
vite.config.js
文件完整代码如下:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
//"/api": "http://t.weather.itboy.net/",
//对以/api开头的请求进行代理
"/api": {
// 代理的目标地址
target: "http://t.weather.itboy.net/",
//设置允许跨域
changeOrigin: true,
// 路径重写
rewrite: (path) => path.replace(/^/api/, ""),
},
},
},
});
我们在/src/components/目录下,新建axios.vue
文件,编写以下代码
<template>
<h3>进行数据请求</h3>
<dl v-for="sites in info">
<dd> 感谢:{{sites.message}}</dd>
</dl>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import axios from 'axios'
const info = reactive({})
onMounted(() => {
const api = "/api/weather/city/101030100"
axios.get("/api" + api).then((response) => {
//console.log(response.data)
//console.log(response.data.message)
info.value = response.data;
})
});
</script>
在项目的App.vue中添加以下代码,引入并使用组件
//引入组件
import axios from './components/axios.vue'
//使用组件
<axios />
App.vue文件完整代码如下:
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import axios from './components/axios,.vue';
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<axios />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
若您此时在运行项目,请将项目关闭,重新运行,在当前目录(按下Ctrl+c,Enter键,输入y,Enter键)执行以下命令
npm run dev
您可看到代码起到效果了