vue路由history模式转SPA方案二选一

一、第三方短链接生成【二选一】

二、配置tomcat和nginx 【二选一】

0.vue项目【最重要的一点是base配置】

// 创建路由
const router = new VueRouter({
  routes,
  mode: 'history',
  base: process.env.NODE_ENV === 'development' ? '/' : '/health' // 放在nginx下时需要配置base
})

1.将tomcat下的ROOT文件中的内容替换【其次是base配置】

把dist文件中的内容放入

（此种方式需要删除ROOT文件夹下的全部内容，将打包的文件放进去，无需修改配置文件）
找到tomcat目录，将tomcat->ROOT文件夹中文件全部删除，将打包好的dist文件夹中的文件全部放到ROOT文件夹中。

2.修改/usr/local/tomcat_app/conf/server.xml

<Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
        <Context path="/petpayDist" docBase="/usr/local/tomcat_app/webapps/ROOT" reloadable="true">
        </Context>
      </Host>

3.在/usr/local/tomcat_app/conf/Catalina/localhost/目录下添加一个rewrite.config文件

#rewrite for tomcat
#内容解释 第一个规则是如果匹配到index.html文件不进行重写
RewriteRule ^/index\.html$ - [L]
 
#第二个规则，如果请求路径不是项目中的静态资源，跳转到 index.html 交给vue-router处理。
RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]

4.重启tomcat搞定