vue前后端分离项目部署，vue前后端分离项目必然会出现前后端不同域而跨域的问题，当然，你可以在前端拼接目标域并在后端处理好跨域，但更优雅的方式是给Nginx/apache配置反向代理。
Apache部署：
部署步骤：
- 把npm run build 构建生产的文件（dist目录里的所有文件）拷贝到服务器的某目录下；
- 在apache的配置文件httpd.conf里添加一个虚拟主机（这个很简单，可以参考下面示例的VirtualHost标签之间的类容）；
- apache配置路由重写（没有这步vue项目在非/路由下刷新页面会产生404错误）；
- apache配置反向代理（配置了这个你的项目就可以直接通过开发环境的代码构建部署，并且不用处理跨域问题）；
- 重启apache,开始访问你的项目。
Apache路由重写和反向代理配置：
我这里是win环境，apache是wampserver里集成的。
给个例子：
我这里前端通过localhost:8088访问，后端服务在localhost:8086上。我的项目里/api 和/_api路由是后端的，所以需要将localhost:8088/api|_api路由代理到localhost:8086/api|_api。
先打开httpd.conf配置文件确认以下下模块是否开启：
（对照下面的内容去掉相应模块前面的#注释符）
LoadModule negotiation_module modules/mod_negotiation.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule rewrite_module modules/mod_rewrite.somod_slotmem_shm.so然后再文件末尾加上如下内容（DocumentRoot和Directory根据自己的项目路径修改）：
<VirtualHost *:8088>
ServerName localhost:8088
ServerAlias localhost:8088
DocumentRoot ${INSTALL_DIR}/www/path/to/dist
<Directory ${INSTALL_DIR}/www/path/to/dist>
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require local
# 路由重写 没有这句vue项目在非/路由下刷新页面会产生404错误
FallbackResource /index.html
</Directory>
# 关掉正向代理
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
# 反向代理配置
ProxyPass /api http://127.0.0.1:8086/api
ProxyPass /_api http://127.0.0.1:8086/_api
# 反向代理重定向配置
# 如果响应报文的Header中有Location(3xx指定重定向的URL)或Content-Location(指定多个URL指向同一个实体)，则使用请求报文中HOST替换URL中的HOST部分。
ProxyPassReverse /api http://127.0.0.1:8086/api
ProxyPassReverse /_api http://127.0.0.1:8086/_api
</VirtualHost>重启apache，配置完成。
更多内容建议参考apache官网文档。
Nginx部署：
不少人用的可能是ningx服务器，nginx部署vue和apache的区别仅在于伪静态和反向代理配置、这里说下nginx的伪静态和反向代理配置
伪静态：
location / {
try_files $uri $uri/ /index.html?$args ;
}反向代理：
location ^~ /api {
index index.html index.htm index.php;
proxy_pass http://127.0.0.1:8086;
}这样，访问到 /api 这个路由的请求就被代理到：:8086/api了,如果还有其他路由需要被代理添加location就行。
el-divider content-position=”right” // element-ui分割线