vue项目history打包后部署在二级目录相关配置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目history打包后部署在二级目录相关配置相关的知识,希望对你有一定的参考价值。

参考技术A history模式,因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接通过路由访问 就会返回 404。所以呢,要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面。
1.vue-router 路由的文件的配置,根据自己部署的二级目录填写

2.在vue.config.js配置文件(如果没有新建一个,项目根目录下)

3.在入口文件中index.html 的head 标签内加入

4.最后就是服务端部署配置,以nginx 为例

配置完这些之后,可以通过二级目录访问到页面了,但是图片资料会加载不了。
1.通过img标签写的图片路径,如果是写的绝对路径例如/static/images, 图片就会访问不到,要改为static/images相对路径,(曾经犯过这样的错误记录一下);
2.通过css background写的图片路径,如果是写的绝对路径例如/static/images, 图片就会访问不到,因为css在打包时会通过loader处理并且通过插件ExtractTextPlugin从JS中抽取出来,所以需要改配置;

这样配置后打包发现还不行,还需要把css的绝对路径写法改为相对路径,比如background: url('/static/images/login/loginBg.png') no-repeat;改为background: url('../../../static/images/login/loginBg.png') no-repeat;

vue项目打包配置多环境

参考技术A

在开发过程中经常遇到这样的情况,开发或者打包需要去请求后台的不同环境(测试环境,预上线环境,正式环境),虽然可以去改动手动的去改变axios的请求前缀,但是难免会出现忘记更改过来的情况,造成一下不必要的时间浪费,因此,这边文章主要教大家如何配置利用命令行进行不同环境的切换运行。
1.更改package.json文件,提供运行的命令

2.在根目录下新建.env.local以及.env.dpl等文件

3.在根目录下新建.htaccess文件,(如果你的路由是history模式)重写url,不然会出现404,页面找不到

4.在根目录下新建deploy.yaml文件

以上是关于vue项目history打包后部署在二级目录相关配置的主要内容,如果未能解决你的问题,请参考以下文章

vue3+vite history模式部署到服务器二级目录

uniapp打包h5部署服务器,apache,uniapp配置history模式

项目nginx部署时,前端用history模式,在浏览器浏览,页面空白

为啥vue官网的js文件没有了

vite+vue3 项目打包部署

Vue路由History模式打包后页面空白,刷新404