nuxt项目中使用axios

最新推荐文章于 2024-02-02 17:46:44 发布

「已注销」

最新推荐文章于 2024-02-02 17:46:44 发布

阅读量5.6k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/TimOut/article/details/98754914

本文详细介绍了在Nuxt项目中集成Axios模块的步骤，包括使用yarn或npm安装@nuxtjs/axios，配置nuxt.config.js以实现请求前缀和代理设置，以及在页面中使用$axios进行HTTP请求的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目环境：nuxt+vue+axios

针对问题：如何在vue框架nuxt中使用axios模块

解决思路：

(1) 把nuxtjs-axios模块添加项目中

(2) 配置nuxt.config.js

(3) 简单使用

参考网址：http://www.axios-js.com/zh-cn/docs/nuxtjs-axios.html

注意事项：前台框架不同，使用的模块也有些不一样的。

例如：你没有使用nuxt框架，只使用vue，那么添加axios模块方式是：npm install --save axios vue-axios

具体步骤：

1. 把nuxtjs-axios模块添加到项目

yarn add @nuxtjs/axios // 使用yarn来安装模块

npm install @nuxtjs/axios // 使用npm来安装模块

注：不同的包管理器，要使用不同的命令

2. 配置nuxt.config.js

简单使用

  modules: [
    '@nuxtjs/axios'
  ],

如果这步完成，可以在项目中方法使用console.log(this) ，这时候可以看到该对象中有$axios属性了

如果你想使用代理可以这样写

  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    prefix: '/app',  //在请求路径前，加上 /app
    proxy: true
  },
  proxy: {
    '/app': { 
        target: 'http://127.0.0.1:8080', //页面仍然显示 http://localhost:3000,但实际上是
                                        //http://127.0.0.1:8080
        pathRewrite: {'^/app': '/test'}    //前面是一个正则表达式,后面是替换后的内容
                              
     }
  },

 当我们使用axios发送请求时
 如果你使用axios发送请求且路径是/helo/hello, 
 那么会被axios中的prefix属性加上前缀,即/app/helo/helo
 而proxy会使得请求变为，http://127.0.0.1:8080/app/helo/helo 
 而pathRewrite会把请求变为 http://127.0.0.1:8080/test/helo/helo

3.例子：

（1）页面中发送的请求时 /helo/helo

<template>
  <div class="container">
    <div @click="loadData">
        显示 
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    loadData(){
      this.$axios.get("/helo/helo?message='hello world'").then(({data})=>{
        console.log(data)
      })
    
    }
  } 
}
 </script>

（2）页面发送的请求是/helo/helo ，实际上请求是http://localhost:8080/test/helo/helo，但页面只能看到的是

http://localhost:3000/app/helo/helo，

module.exports = {
  mode: 'universal',
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#fff' },
  css: [
  ],
  plugins: [
  ],
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    prefix: '/app',  //在请求路径前，加上 /app
    proxy: true
  },
  proxy: {
    '/app': { 
        target: 'http://127.0.0.1:8080',   //页面仍然显示 http://localhost:3000,但实际上是
                                           //http://127.0.0.1:8080
        pathRewrite: {'^/app': '/test'}    //前面是一个正则表达式,后面是替换后的内容
     }
  },
  build: {
    extend(config, ctx) {
    }
  }
}

（3） showMsg方法能够处理的请求是，http://localhost:8080/test/helo/helo

package com.example.demo.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/test/helo")
public class HeloController {
	@RequestMapping("/helo")
	@ResponseBody
	public String showMsg(String message) {
		return message;
	}
}