解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题

背景：最近做一个项目打包后需要部署在非根目录的文件夹内进行访问，对于这一问题一开始很是头疼，最后查找和询问同事之后得到如下方法：

1、先解决如何配置非根目录访问的方式，如下：

假设打包后的dist文件内容需要部署到非根目录http.xxx.com/test子路径下，解决步骤如下：

• 修改vue.config.js中的publicPath

module.exports = {
    publicPath: "/test/", //打包后部署在一个子路径上http:xxx/test/
    productionSourceMap: false,
    devServer: {
        // proxy: "http://xxxx.com", //测试或正式环境域名和端口号
    },
};

• 修改路由router的/index.js

const router = new VueRouter({
  mode: "history",//路由模式
  base: "/test/",//部署的子路径
  routes,
});

export default router;

• 后端需要帮忙配置

Nginx配置：

location ^~/m {
    try_files $uri $uri/  /m/index.html;
}

Apache配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

至此配置完成！！！

但是此时vue使用history模式下 部署 tomcat 时刷新页面就会出现404，找不到资源的问题

可以简单理解History模式跟Hash的区别就是URL不带#号，History需要后台配置支持

• 在URL中浏览器不会把#后边的参数传给服务端，使用Hash模式时后端同学也不需要单独处理，不会返回404页面，但是有时候自动会直接过滤#后边的参数，对应传参来说不够方便。
• 当使用History时URL中不带#，请求服务器时将整个URL发送给服务端，如果没有进行相关的路由配置处理，服务端会不认识，返回404或空白页面，所有使用History模式需要后台对路由地址进行相应的处理。

2、此时就需要解决在Tomcat上页面刷新找不到资源的问题了，如下：

在 Tomcat 下 webapps→test（test项目文件名）→创建WEB-INF→创建web.xml

web.xml 内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>

至此两个问题解决完成！！！

感谢支持！！！