vue項目打包發佈後接口報405錯誤的解決

  devServer: {
    // host: "0.0.0.0", //項目運行時的本地地址
    // port: 8880, // 端口號
    //proxy:{'/api':{}},代理器中設置/api,項目中請求路徑為/api的替換為target
    proxy: {
      '/api': {
        // target: "http://192.168.0.249:19029",//代理地址，這裡設置的地址會代替axios中設置的baseURL
        target: process.env.VUE_APP_BASEURL_API,//代理地址，這裡設置的地址會代替axios中設置的baseURL
        changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
        //ws: true, // proxy websockets
        //pathRewrite方法重寫url
        pathRewrite: {
          '^/api': "/"
          //pathRewrite: {'^/api': '/'} 重寫之後url為 http://192.168.1.16:8085/xxxx
          //pathRewrite: {'^/api': '/api'} 重寫之後url為 http://192.168.1.16:8085/api/xxxx
        },
    },
    https: false, // https:{type:Boolean}
    disableHostCheck: true,
    open: true, //配置自動啟動瀏覽器
  },

server {
    listen       9000;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files  $uri $uri/  @router;
    }
    location /api {
       rewrite ^/api/$  permanent;
       proxy_pass http://192.168.0.253:30001/warehouse/;
       proxy_redirect default;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header REMOTE-HOST $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}
 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}
    location @router {
        rewrite ^.*$ /index.html last;
    }
    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

const express = require('express')
const app = express();
// 解決跨域問題
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
})
// 調用接口直接返回一個數組
app.get('/getData', (req, res) => {
    res.send([
    	{
            id: 1,
            name: 'GAI'
        },
        {
            id: 2,
            name: 'keyNg'
        },
        {
            id: 3,
            name: '閃火'
        }
    ])
})

// api/index.js
import axios from 'axios'
export function getData() {
    return axios({
        url: 'api/getData',
        method: 'get'
    })
}

// home.vue
mounted() { 
   getData().then(res => {
     console.log(res);
   })
},

// .env.development
VUE_APP_TITLE = '溫情dev'
VUE_APP_ENV = 'dev'
VUE_APP_BASE_URL = 'http://localhost:3000'

// .env.production
VUE_APP_TITLE = '溫情pro'
VUE_APP_ENV = 'pro'
VUE_APP_BASE_URL = 'http://localhost:3000'

// api/index
// 這裡隻是簡單解決一下問題
// 重點就是把開發環境和生產環境請求地址區分開來就可以瞭, 根據實際情況自行改動
import axios from 'axios'
let baseURL = '';
// process.env.VUE_APP_ENV拿到我們在前面設置的模式，
// 如果現在是開發環境會使用`.env.development`裡面設置的環境變量等於`dev`
// 如果現在是生產環境會使用`.env.production`裡面設置的環境變量等於`pro`
if(process.env.VUE_APP_ENV === 'dev') {
    baseURL = '/api';
} else {
    baseURL = process.env.VUE_APP_BASE_URL
}
export function getData() {
    return axios({
        url: `${baseURL}/getData`,
        method: 'get'
    })
}