vue打包axios请求报404_vue-cli项目打包后部署到Nginx,axios请求接口404报错-Go语言中文社区...

一、vue-cli打包

打包前，修改两处路径，一个是在vue.config.js下添加publicPath配置

module.exports = {

// 打包前修改静态文件路径

publicPath: '/目录名', //Nginx下html文件夹里创建的目录名

devServer : {

proxy : {

'/api' : {

target : 'http://xx.xx.xx.xx',

changeOrigin : true

}

}

}

}

修改过后网页在开发环境下项目就不能正常运行了，打包后，静态资源就是在这个路径之后

再去修改路由，我的是history模式，修改base

// base: process.env.BASE_URL,//这是默认的

base: '在Nginx里的html下的目录名',

接下来就可以打包，npm run build

将打包好的dist文件夹里面的文件，复制到Nginx的html下的所创建的目录里，运行Nginx服务，这时访问locahost/目录名发现axios请求404报错

二、Nginx配置

找到Nginx里conf目录下的nginx.conf，在server里error_page配置后面添加代码

location /目录名/ {

root html;

index index.html index.htm;

try_files $uri $uri/ /miaomiao/index.html;

}

location /api/ {

proxy_set_header X-Real-IP $remote_addr;

proxy_pass http://xx.xx.xx.xx/api/; //接口路径

proxy_redirect off;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host $http_host;

proxy_set_header X-NginX-Proxy true;

}

api就是vue.config.js，自定义的代理名

module.exports = {

// 打包前修改静态文件路径

publicPath: '/目录名',

devServer : {

proxy : {

'/api' : {

target : 'http://xx.xx.xx.xx',

changeOrigin : true

}

}

}

}

修改好Nginx配置，重启服务访问就解决了