登录  /  注册
博主信息
博文 70
粉丝 0
评论 2
访问量 90325
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
vue跨域请求
搁浅
原创
546人浏览过

VUE单文件

  1. <template>
  2. <div>
  3. <button @click="axi()">axios</button>
  4. </div>
  5. </template>
  6. <script setup>
  7. import axios from "axios";
  8. function axi(){
  9. axios({
  10. url:'/api/hisWeather/province',
  11. method:'get',
  12. params:{
  13. key:'f507ae99d73667d37531e8f8b3e12345'
  14. }
  15. }).then(res=>{
  16. console.log(res)
  17. }).catch(err=>console.log(err))
  18. }
  19. </script>

vue.config.js配置文件

注意,配置完成后要重启服务,不然不生效。

  1. const { defineConfig } = require('@vue/cli-service')
  2. const os = require("os");
  3. let needHost = "0.0.0.0";
  4. try {
  5. let network = os.networkInterfaces();
  6. needHost = network[Object.keys(network)[0]][1].address;//获取当前IP地址
  7. } catch {
  8. needHost = "localhost";
  9. }
  10. module.exports = defineConfig({
  11. transpileDependencies: true,
  12. publicPath:'/',// 项目部署的地址,开发的时候用/,生产的时候./,在历史模式中要是反着写开发的时候用./除了首页刷新都会错误,/生产后打开会白屏,或者路径错误。
  13. outputDir: 'dist',// 项目的打包地址(默认dist),在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
  14. assetsDir: 'static',// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  15. productionSourceMap: false,// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  16. devServer: {// webpack-dev-server 代理配置相关配置
  17. open: true,// 编译后,是否后自动打开浏览器
  18. host:needHost,// 浏览器打开的域名
  19. https: false,// 是否是https
  20. port: 8080,// 端口号
  21. proxy: {// 代理匹配规则
  22. '/api': {// 请求时开始匹配的url
  23. target: 'http://apis.juhe.cn',// 要访问的跨域的域名
  24. //相当于把url传过来的/api/hisWeather/province过滤掉/api,就变成了http://apis.juhe.cn/hisWeather/province,但是请求的链接不会显示真实域名。
  25. ws: false,// 是否代理 websockets
  26. secure:false,// 是否https协议,false则http
  27. changeOrigin: true,// 是否跨域
  28. toProxy: false,// 是否传递绝对URL作为路径(对代理代理很有用),可不写。
  29. prependPath: true,// 默认值:true 指定是否将目标的路径添加到代理路径,可不写。
  30. ignorePath: false,// 默认值:false 指定是否忽略传入请求的代理路径,可不写。
  31. // agent:{},// 传递给http(s).request的对象,使用才写,不然报错。
  32. // ssl:{},// 传递给https.createServer()的对象,使用才写,不然报错。
  33. pathRewrite: {
  34. '^/api': ''//重写路径,请求的时候使用这个
  35. }
  36. },
  37. }
  38. },
  39. })
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学