Vue2中Axios配置baseApiURL开发正常生产环境404问题咨询

核心结论：该404错误和Vue2、Vue3的配置差异没有任何关联，你完全不需要切换到Vue3重构项目，问题出在生产环境的服务部署配置环节，可按照以下步骤逐一排查：

第一步：确认VPS上的后端服务运行状态 #

• 检查后端服务是否已经正常启动，你可以在VPS执行ps aux | grep node查看是否有对应的node进程在运行
• 确认后端服务监听的端口是否为4000，本地测试后端接口是否正常：

  curl http://localhost:4000/api/你实际的请求路径
  

  如果该请求返回404，说明后端本身的路由配置错误，和前端无关。

第二步：检查反向代理配置 #

你生产环境的请求地址是https://mydomainname.com/api，需要确保你用的Nginx/Apache等反向代理服务，已经正确把/api前缀的请求转发到本地运行的4000端口服务，以Nginx为例，正确配置参考：

server {
  listen 443 ssl;
  server_name mydomainname.com;
  # 你的ssl证书配置省略

  # 前端静态资源路径
  location / {
    root /你的vue打包后的dist目录路径;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  # 接口转发规则
  location /api {
    proxy_pass http://127.0.0.1:4000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

配置修改后需要重启Nginx生效。

第三步：确认Vue生产环境变量是否正确注入 #

Vue2使用vue-cli时默认支持读取.env.production的环境变量，需要注意：

• 打包时必须使用生产模式打包，执行命令为npm run build --mode production
• 打包完成后可以在dist目录的js文件中搜索你的域名地址，确认process.env.VUE_APP_BASE_API_URL已经被正确替换为https://mydomainname.com/api，如果没有被替换，检查你的vue-cli版本是否支持环境变量配置，或者.env.production文件是否放在项目根目录。

内容的提问来源于stack exchange，提问作者Joseph