我的项目是在vue的config文件夹中的index.js中配置了接口地址 ,本地跑的时候都能访问,放到线上就报404;
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/xxx': {
target: 'http://xxxxxxxx:xxx/', // 源地址
changeOrigin: true, // 改变源
pathRewrite: {
'^/xxx': ''
}
},
}
其他的看着有说删掉pathRewrite的对我没用
后来看了这个大佬的文章::https://www.cnblogs.com/lwl80/p/16640842.html
发现改下nginx配置就行了
server {
listen xxx;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root xxx/xxx/xxx;
index index.html index.htm;
}
# 由于路由的资源不一定是真实的路径,无法找到具体文件
# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
# 关键步骤,这里表示将所有的 /admin/ 开头的请求都转发到下面 proxy_pass 指定的链接中
# 为了防止在访问页面时请求就被 Nginx 代理转发,这里需要更具体的配置,才能和前端访问请求区分开
location /admin/ {
# 后端的真实接口
proxy_pass http://xxxxxxxxx:xxx/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie;
#for Ajax
#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header x-requested-with $http_x_requested_with;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
}