问题1:
1. history模式下,发布到nginx后,刷新页面或者地址栏回车404问题。
打开nginx的nginx.conf文件,添加注释【2】对应行的代码,可以解决这个问题。
events {
worker_connections 1024;
}
http {
include mime.types; #【1】
default_type application/octet-stream; #【1】
server {
listen 9003;
server_name localhost;
#支持跨域cors
add_header Access-Control-Allow-Origin *;
location / {
root dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #【2】
}
}
}
2. vue打包发布到nginx后,可以成功请求到css,但是样式没有被应用问题。
碰到这种情况,先打开浏览器控制台,到network panel,然后找到请求的css,然后看一下响应里面的content-type是不是text/plain,如果是就说明不对,应该是text/css才对。针对这个情况,同样是打开nginx.conf文件,将上面注释【1】中的内容粘贴上即可。
问题2:
vue路由为history模式,打包后,放到springboot后,启动springboot进入到页面后,刷新页面404问题。
原因:使用history模式,刷新页面后,浏览器会使用url去springboot中找对应的controller映射或者把url当做一个静态资源去查找,如果找不到就会返回404.(hash模式下刷新是找页面中对应的锚点中的内容显示,所以不会想springboot发起新的请求,就不会出现404问题)
解决方式:刷新后让404引导到index.html就行了。代码如下:
@Configuration
public class WebConfig {
@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> myWebServerFactoryCustomizer(){
return new WebServerFactoryCustomizer<ConfigurableWebServerFactory>() {
@Override
public void customize(ConfigurableWebServerFactory factory) {
ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
factory.addErrorPages(error404Page);
}
};
}
}