vue中使用axios打包发布nignx

在Vue项目中使用axios发送HTTP请求，并将项目打包发布到Nginx服务器上，可以按照以下步骤进行操作：

1. 首先，在Vue项目中安装axios：

npm install axios

2. 在Vue项目的入口文件（通常是`main.js`）中引入axios：

import axios from 'axios'

Vue.prototype.$http = axios

这样，你就可以在Vue组件中使用`this.$http`来发送HTTP请求了。

3. 在需要发送HTTP请求的组件中使用axios：

this.$http.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  })

注意：这里的`/api/data`是你要请求的API接口路径，根据你的实际情况进行修改。

4. 接下来，需要修改Vue项目的配置文件`vue.config.js`，配置代理以解决跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里的`target`是你的后端服务器地址，根据你的实际情况进行修改。

5. 打包项目：

npm run build

执行该命令后，会在项目根目录下生成一个`dist`文件夹，里面包含了打包后的静态文件。

6. 将生成的静态文件部署到Nginx服务器上，可以将`dist`文件夹下的所有文件放置到Nginx的静态资源目录下。

7. 修改Nginx配置文件`nginx.conf`，配置反向代理：

server {
  listen 80;
  server_name your-domain.com;

  location /api {
    proxy_pass http://your-backend-server;
  }

  location / {
    root /path/to/your/dist;
    try_files $uri $uri/ /index.html;
  }
}

这里的`your-domain.com`是你的域名，`your-backend-server`是你的后端服务器地址，`/path/to/your/dist`是你放置静态文件的路径，根据实际情况进行修改。

8. 重启Nginx服务使配置生效。

现在，你的Vue项目就可以通过axios发送HTTP请求，并且在使用Nginx部署后能够正常访问了。