1.本地vue项目解决与后端联调跨域问题
// 跨域配置
module.exports = {
// publicPath:'./', //可以理解成build出来的index.html从哪里找他引用的js、css等文件。默认是"/"从根目录寻找
publicPath:'./',
devServer: { //记住,别写错了devServer//设置本地默认端口 选填
port: 8080,//9876前端端口
proxy: { //设置代理,必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
target: 'http://localhost:8085', //代理的目标地址 后端域名或者ip地址需要加端口号
changeOrigin: true, //是否设置同源,输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的单词
}
}
}
}
}
2.Nginx 部署 Vue 项目报 500 错误
将你的dist文件夹上传到/var下面即不会出现bug
nginx.conf的server节点配置如下
server {
listen 8080; #1.你想让你的这个项目跑在哪个端口
server_name localhost; #2.当前服务器ip
#添加头部信息
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;
location / {
root /var/nginx/dist; #3.dist文件的位置
index index.html;
try_files $uri $uri/ /index.html; #4.重定向,内部文件的指向(照写)
}
location /api/ {
rewrite ^/api/(.*) /$1 break; # 做 统一代理
proxy_pass http://xxx:5000/; # 后端服务 ip、端口
add_header ‘Access-Control-Max-Age’ 0;
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}