其他分享
首页 > 其他分享> > devServer通过项目名(非根路径)访问项目的一些配置

devServer通过项目名(非根路径)访问项目的一些配置

作者:互联网

devServer通过项目名(非根路径)访问项目的一些配置

项目环境

使用vue-cli搭建项目,路由使用history模式

配置项目名

使用vue-cli 构建项目时,本地项目启动通常使用devServer,而devServer启动项目后,访问路径与vue.config.js中的publicPath有关:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
当publicPath配置为/crccpoc/时,项目名即crccpoc,需要通过http://localhost:9528/crccpoc/访问项目

访问根路径时重定向

配置before接口,可以实现访问根路径http://localhost:9528/时重定向到http://localhost:9528/crccpoc/
在这里插入图片描述

注意项目名和axios api前缀的冲突

完成上述配置后,发现访问项目时,请求被转发到后台服务器,并返回404,原因是devserver的proxy代理路径与项目名冲突,都以/crcc开头,devserver先执行代理,若访问路径与代理路径不匹配才在本地服务器寻找请求的资源,由于项目名是/crccdemo,与代理路径前缀相同,所以被转发到了后台服务器,后台服务器没有html文件,所以返回404:
在这里插入图片描述
修改 proxy配置,代理路径添加’/'后缀,问题解决:
在这里插入图片描述

配置路由的base路径

由于使用history模式,所以需要配置路由的base,与项目名保持一致:
在这里插入图片描述
base的作用是给路由统一添加前缀,生成新的地址,然后替换掉浏览器地址栏根路径后面的部分,比如路由配置为:

{
	path:'/welcome',
	component:WelcomeComponent
}

当访问路由,如调用router.push(’/welcome’)时,浏览器的url地址栏显示http://localhost:9528/crccpoc/welcome,若不配置base,虽然能加载welcome页面,但浏览器地址栏变成了http://localhost:9528/welcome,项目名消失了

静态资源未找到时返回200状态码的问题

正常情况下,若访问不存在的静态资源,如一张图片,或一个txt文件,应该返回404状态码,但是当路由设置为history模式时,由于刷新页面时可能找不到页面(原因可以百度),所以devServer在history模式下找不到的资源会统一返回index.html,但是这就导致非页面请求,比如图片,txt文件等静态资源不存在时,也会返回index.html,由于f12看到网络请求的状态码为200,可能误以为需要的资源能正常加载,导致潜在的bug(尤其在使用第三方类库时自动加载的静态资源,可能测试不充分,没发现bug),如访问一个不存在的资源graph.txt:
在这里插入图片描述
在这里插入图片描述
可以看到返回了index.html,并不是真正的graph.txt

因此需要配置devserver的historyApiFallback选项:
在这里插入图片描述

这个选项支持boolean型和object型的值,当设置为true时,访问不存在的非html页面的静态资源(图片,txt等)会返回404状态码:
在这里插入图片描述
而访问不存在的html页面会返回index.html(historyApiFallback使用connect-history-api-fallback实现,通过http的accept请求头识别静态资源的类型),这在项目路径为根路径时是没有问题的,但是修改项目路径后(/crccpoc),访问不存在的html页面时,返回的index.html有问题,是源码中未编译的index.html,而不是编译后发布的index.html,所以需要修改一下配置,使用object型的值,通过index选项指定index.html的位置
在这里插入图片描述

标签:非根,配置,项目,index,路径,devServer,访问,html
来源: https://blog.csdn.net/u012334071/article/details/122751966