标签：非根 配置 项目 index 路径 devServer 访问 html
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。