[vue]打包后发布相关问题总结

问题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);
            }
        };
    }
}