我在建站这行摸爬滚打七年，见过太多小白被“前后端分离”这四个字忽悠得团团转。其实对于很多中小企业项目，或者预算有限的个人开发者来说，搞什么微服务、Nginx反向代理，纯属给自己找罪受。今天咱就聊聊那个让无数人头秃的话题：vue前后端不分离访问地址到底该怎么配？
前阵子有个兄弟找我救火，他的项目跑在本地好好的，一部署到服务器，页面白屏，控制台报错一片红。我一看代码，好家伙，前端用的Vue CLI，后端是Spring Boot，但他居然没做分离，直接把Vue打包后的dist文件夹扔到了Tomcat的ROOT目录下。
这种做法有个巨大的坑，就是路径问题。
很多新手不知道，vue前后端不分离访问地址如果配置不对，刷新页面直接404。为啥？因为Vue Router默认用的是history模式，它看起来像普通URL，但本质上是前端路由。当你刷新 /user/list 时，浏览器会向服务器请求这个文件，但服务器上根本没有这个文件，只有index.html。
这时候，服务器配置就至关重要了。
我那个兄弟的项目，用的是Nginx。他直接在location块里配了root，结果就是访问任何子路径都找不到资源。正确的做法，得加上try_files指令。
比如这样写：
location / {
try_files $uri $uri/ /index.html;
}
这一行代码，就是告诉Nginx，如果找不到文件，就重定向到index.html，让Vue自己去处理路由。
但这还不够。
更头疼的是API请求的地址问题。
在开发环境，我们用axios请求后端接口，通常配的是代理，比如 /api 指向 localhost:8080。但一旦打包上线，这个代理就失效了。
如果你还是用相对路径，或者写死了绝对路径，很容易出问题。
特别是当你的项目部署在子目录下，比如 www.example.com/myapp，这时候vue前后端不分离访问地址的处理就要格外小心。
我建议的做法是，后端接口统一加前缀，比如 /api，然后在Nginx里做映射。
location /api {
proxy_pass http://127.0.0.1:8080;
}
这样，前端的 /api/user 请求，会被Nginx转发到后端的 /user 接口。
这里有个细节，很多教程没讲清楚。
如果你的后端接口本身就有前缀，比如 /v1/user，那你在Nginx里配 proxy_pass http://127.0.0.1:8080/v1; 时，要注意末尾的分号。
如果有分号，Nginx会保留原路径；如果没有，Nginx会替换路径。
这个坑，我至少踩过三次。
还有一次，客户用的是Apache服务器，他问我为什么配置了RewriteRule还是不行。
其实道理是一样的，就是要把所有非文件请求，都指向index.html。
.htaccess文件里加上：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
这套配置，能解决90%的vue前后端不分离访问地址问题。
当然，也有极端情况。
比如你的项目里既有静态资源，又有动态接口，而且部署在同一个域名下，不同端口。
这时候，跨域问题就来了。
虽然前后端不分离，但如果端口不同，浏览器还是会拦截请求。
解决办法很简单，后端加个CORS配置，允许所有来源，或者指定具体域名。
别嫌麻烦，这一步不做，前端页面根本拿不到数据。
我常跟客户说，技术选型没有最好，只有最合适。
对于小型项目，前后端不分离，代码结构清晰，部署简单，维护成本低。
只要把vue前后端不分离访问地址这个核心问题搞定，剩下的就是细节打磨。
别一上来就搞分布式，那都是大企业玩剩下的。
咱们普通人，先把基础打牢，把路径配对，把代理设好，比啥都强。
记住，报错别慌，先看控制台，再看Nginx日志，最后再看代码。
一步步排查，总能找到那个让你头疼的“小妖怪”。
