vue部署到服务器后有路由的情况刷新提示404
因为路由使用的是histroy模式
需要进行以下配置
在Nginx管理中进行配置
listen 80;
server_name 100.0.0.0;
index index.html index.htm index.php;
root /www/wwwroot/vue_show;
#error_page 404 /404.html;
include enable-php.conf;
location /host/
{
proxy_pass http://100.0.0.0:0000/;
}
location /
{
index index.html index.htm index.php;
root /www/wwwroot/vue_show;
try_files $uri $uri/ @rewrites;
}
location @rewrites
{
rewrite ^(.+)$ /index.html last;
}
配置后重启Nginx(在Nginx管理中服务里重启)
前端的baseURL
也需要对应进行修改
axios.defaults.baseURL = "http://100.0.0.0/host/"
IP/host
的形式,与上面配置保持一致。
- 跨域一开始用了
vue.config.js
里配置的方法,不知道为啥部署了就不行了。
module.exports = {
devServer: {
proxy: { //配置跨域
'/api': {
//后台接口
target: 'http://100.0.0.0:0000',
changOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
},
}
},
}
- 有知道的大佬麻烦留言告诉我下。在此谢过。