项目部署在Tomcat

vue-cli开发过程中路由#不好看，去掉可使用history模式，开发模式路径访问都没问题，部署到服务器之后访问路径时报404，这种情况需要配置服务器默认访问路径index.html.官网只提供了apache、nginx的配置方式，没有tomcat的配置方式

文件夹下新建WEB-INF/web.xml 其中添加404错误跳转路径

  1. <?xml version='1.0' encoding='UTF-8'?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
  5.          id="scplatform" version="2.5">
  6.   <display-name>/</display-name>
  7.   <error-page>
  8.     <error-code>404</error-code>
  9.     <location>/index.html</location>
  10.   </error-page>
  11. </web-app>

项目部署在Nginx

  2. # html设置history模式
  3. location / {
  4.   index index.html index.htm;
  5.   proxy_set_header Host $host;
  6.   # history模式最重要就是这里
  7.   try_files $uri $uri/ /index.html;
  8.   # index.html文件不可以设置强缓存 设置协商缓存即可
  9.   add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
  10. }
  12. # 接口反向代理
  13. location ^~ /api/ {
  14.   # 跨域处理 设置头部域名
  15.   add_header Access-Control-Allow-Origin *;
  16.   # 跨域处理 设置头部方法
  17.   add_header Access-Control-Allow-Methods 'GET,POST,DELETE,OPTIONS,HEAD';
  18.   # 改写路径
  19.   rewrite ^/api/(.*)$ /$1 break;
  20.   # 反向代理
  21.   proxy_pass http://static_env;
  22.   proxy_set_header Host $http_host;
  23. }
  25. location ~* \.(?:css(\.map)?|js(\.map)?|gif|svg|jfif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
  26.   # 静态资源设置七天强缓存
  27.   expires 7d;
  28.   access_log off;
  29. }