为什么在vue.config.js404代理

Question

我有一个小的前端和后端分离的项目，开发环境和生产环境，所以我想设置代理来调用api。vue/cli版本为4.6。5.

文件结构：

src
 axios
  api.js
  request.js
 components
  home
   LastBlogs.vue
.env.development
.env.production
package.json
vue.config.js

.env.development：

    NODE_ENV = 'development'
    
    VUE_APP_BASE_API = '/dev-api'
    
    VUE_APP_API_ADDRESS= 'http://localhost:8080/blog/'

.环境。制作：

    NODE_ENV = 'production'
    
    # base api
    VUE_APP_BASE_API = '/api'
    
    # api publicPath
    VUE_APP_API_ADDRESS= 'http://localhost:8080/blog'

vue.config.js：

    'use strict'
    var path = require('path')
    module.exports = {
        configureWebpack: {
            devtool: 'source-map'
        },
        assetsDir: 'static',
        devServer: {
            contentBase: path.join(__dirname, 'dist'),
            compress: true,
            port: 8001,
            proxy: {
                [process.env.VUE_APP_BASE_API]: {
                  target: [process.env.VUE_APP_API_ADDRESS], // api地址
                  changeOrigin: true,
                  ws: true,
                  pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: '/api',
                  }
                }
              }
        }
    }

axios：

    import axios from 'axios'
    import qs from 'qs'
    // import {app} from '../main.js'
    
    console.log(process.env)
    
     /****** 创建axios实例 ******/
    const request = axios.create({
        baseURL: process.env.VUE_APP_API_ADDRESS,
        timeout:5000
    })
    
    // some code of interceptors
    export default request;

应用程序编程接口。js:

    import request from './request.js'
    
    var api = process.env.VUE_APP_BASE_API //'/api'
    export function getLastBlogs(){
        return request({
            url: api+'/blog/lastBlogs',
            method: 'get'
        })
    }

我在vue文件中调用api如下：

    <script>
    import {getLastBlogs} from '@/axios/blogApi.js'
    export default {
        name: 'LastBlogs',
        data() {
            return {
                blogs: ["AAAA", "BBBB"]
            }
        },
        created: async function(){
                
            let res = await getLastBlogs();
            this.blogs = res.data
            }
    }
    </script>

我该怎么办？谢谢

Answer 1

因此，您正在配置Vue CLI dev server（在端口8001上运行）以将所有请求代理到/api到http://localhost:8080/blog/api（服务器），但同时将Axios配置为使用baseURL:process。环境。VUE_应用程序_API_地址。。。这意味着Axios将所有请求直接发送到您的服务器，而不是代理服务器。。。

从Axios配置中删除process.env.VUE_APP_API_ADDRESS

我也相信你的路径重写选项在代理配置是不正确的。

1. 您将请求发送到/dev api/blog/lastBlogs

尝试将pathRewrite更改为[process.env.VUE\u APP\u BASE\u API]：'/API'