使用vite搭建vue3项目(四)
2021/12/9 6:48:15
本文主要是介绍使用vite搭建vue3项目(四),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.安装axios
npm install axios
2.修改App.vue
<template> <img alt="Vue logo" src="./assets/logo.png" /> </template> <script lang="ts"> import { defineComponent, onMounted } from "vue"; import axios from "axios" export default defineComponent({ name: 'App', setup() { let weather = {} onMounted(()=>{ axios.get(`http://www.weather.com.cn/data/sk/101010100.html`).then(res=>{ weather = res }).catch(err=>{ console.log(err) }) }) return { weather} } }) </script>
由于跨域的原因,实际请求不到数据。所以来到下一步,配置跨域代理
3.跨域代理
配置vite.config.ts,见server部分
import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import {viteMockServe} from "vite-plugin-mock"; import path from 'path' // 需安装此模块 // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), viteMockServe({ supportTs: true }) ], resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, server: { host: '0.0.0.0', port: 9000, proxy: { '/api': { target: 'http://www.weather.com.cn', //实际请求地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } })
将本地端口配置为9000(默认为3000)官方文档,配置了代理
将原来项目中的请求地址改成以/api开头的
let weather = {} onMounted(()=>{ axios.get(`api/data/sk/101010100.html`).then(res=>{ weather = res }).catch(err=>{ console.log(err) }) })
查看浏览器网络请求
修改App.vue将请求数据显示在页面上
<template> <img alt="Vue logo" src="./assets/logo.png" /> <div> {{weatherinfo.city}} {{weatherinfo.WD}} {{weatherinfo.WS}} </div> </template> <script lang="ts"> import { defineComponent, onMounted, nextTick ,reactive } from "vue"; import axios from "axios" export default defineComponent({ name: 'App', setup() { let weatherinfo = reactive({}) onMounted(()=>{ axios.get(`api/data/sk/101010100.html`).then(res=>{ Object.assign( weatherinfo, res.data.weatherinfo) console.log('weatherinfo', weatherinfo) }).catch(err=>{ console.log(err) }) }) return { weatherinfo} } }) </script>
页面显示截图
这篇关于使用vite搭建vue3项目(四)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode