1. 安装axios
值得一提的是,这里不用再加@next了,直接用就好。
yarn add axios
2. 请求接口
为了展示,我直接在Home.vue中使用,对于axios大家可以自行封装。
和之前vue2项目没有太大区别, 最多就是把比如api.js改成api.ts。
Home.vue
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import axios from "axios";
export default defineComponent({
name: "Home",
components: {},
setup() {
onMounted(()=>{
axios.get(`http://api.example.com/search?keywords=vue3`).then(res=>{
console.log(res)
})
})
},
});
</script>
跨域也是在情理之中,所以来到下一步,配置跨域代理。
3. 跨域代理
找到vite.config.ts,新建server部分代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 8080,
proxy: {
'/api': {
target: 'http://api.example.com', //实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
})
将原来项目中的请求地址改成以/api开头的,如:
axios.get(`/api/search?keywords=vue3`).then(res=>{
console.log(res)
})
使用【本机pi】:8080重新启动项目,可以看到跨域问题解决了。
注意本来启动项目是使用localhost:3000,因为这里vite.config.ts做出了修改,所以换成了【本机ip】:8080
有人就会问了,怎么写法和平时看到的博客不一样呢。
其实,还不是因为vite文档更新了。
所以还是以文档为准:配置Vite