Vue实现项目部署到非根目录及解决刷新页面时找不到资源
作者：小破孩呦
这篇文章主要介绍了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>
总结
至此两个问题解决完成！！！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。