Vue 出现Cannot GET / 的一种解决方案

最新推荐文章于 2025-05-06 17:16:46 发布
原创 最新推荐文章于 2025-05-06 17:16:46 发布 · 7.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Vue 出现Cannot GET / 的一种解决方案

网上有很多解决办法，但是好像不同的问题都会出现这种错误。。。所以试过很多办法后，问题依然存在。

方案一，最简单粗暴的办法： 删除本地代码，重新clone一次。
方案二，常规办法：通过控制看是否有异常，本次我的异常是CSS Loader Invalid Options，于是网上所有相关的信息。最后发现是package.json "css-loader": "^ 0.26.1" 版本升级到“^3.0.0”了，于是又把它降回去，重新编译就好了。

希望对其他人有点帮助

Vue中常见问题汇总及解决方案（一）
小刘哥的博客
07-30 410
确保你正确地引入和使用了所有需要的变量和函数。
vue - 详解配置反向代理后，项目出现白屏的情况，js、css文件404问题解决方案（Vue解决项目白屏以及反向代理）
高级前端工程师
12-20 5600
vue 项目配置反向代理导致项目白屏，js、css文件404问题解决方案，Vue项目History模式404问题解决方法，Vue在本地配置反向代理发布后就不生效了原因解释，vue项目配置反向代理，Vue项目启动白屏问题的几种解决办法，vue首页白屏是什么问题引起的?如何解决?，vue 项目配置反向代理导致项目白屏，nginx反向代理二级目录 导致vue项目静态文件css js访问不到，Uncaught TypeError: Cannot set properties of undefined (settin
vue项目启动出现cannot GET /服务错误的解决方法
11-21
上午做了项目，中午吃完饭后回来再跑一次服务器， 出现 Cannot GET/： 控制台中并没有报错；npm run dev命令行窗口也没有报错。 原因 在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同… 于是把能改的地方都改了…（基本上相当于将配置信息改回来） 关闭 history 模式 关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）； 更改端口号 更改端口号（没改的话打开原端口号自动加上登陆次数） 在 webpack.base.conf.js 配置信息里面，把自己改动的部分先注释掉再重新跑一下服务，在
vue页面（vue Cannot GET /）
weixin_45932460的博客
11-02 1171
方法一、 https://segmentfault.com/q/1010000040394171https://segmentfault.com/q/1010000040394171方法二、 vue项目出现 cannot GET/ 的问题总结_似水流年-优快云博客1.没有报错，页面显示cannot GET,经过排查发现config/index.js里的dev做了改动。他想实现pc和移动端跳转，所以修改assetsPublicPath: '/m/'。在移动端访问直接走'/m/#'。直接npm run .
Vue报错：Cannot read properties of null (reading ‘xxx‘)
qq_38732082的博客
05-06 647
Vue报错：Cannot read properties of null (reading ‘xxx’)
vue项目启动后页面显示‘Cannot GET /’
weixin_45721912的博客
05-09 3539
1、npm run dev命令启动项目的时候没有报错，页面打开却提示 Cannot GET / 2.这个时候只需要找到config文件夹下面的index.js文件。把assetsPublicPath字符串的：‘./’修改成 ‘/’就行了。修改完之后记得关闭项目，然后重新启动。不然不会生效
vue3.0 构建后管 test development production 环境 以及路由跳转正常点击刷新出现cannot get
sinat_36017053的博客
09-29 653
vue3.0 多环境构建
Vue打包后页面出现cannot get
weixin_30349597的博客
08-31 451
学习Vue有大半个月了，然而遇到了不少坑，完全没有高手们那么容易，中间有不少值得记录下的东东，回头好好理理。先理下今天的： Vue打包命令简单啊，直接在命令行输入：npm run build 然而没一会儿页面出现是的cannot get 我去，这怎么搞 搜索啊 问人啊 折腾到想放弃 页面还是依然 cannot get 只能从头逐步排查了，大家都说要修改config下的index.j...
关于vue3.0 + vite的坑（持续更新，有问题在下面留言，解决过的我可以帮忙）
m0_67392811的博客
03-06 667
多的数不胜数,而且我也没看出来用了setup函数能解决代码是屎山的问题 最大的坑是第三方组件库还不支持vue3.x的问题 这个问题还没找到解决方案，有没有老哥知道怎么让vue2的第三方库兼容vue3项目的可以加个群讨论一下，这个坑绕不过去很多项目只能乖乖用vue2，当然一些小项目还是可以拿来练手的，尤其H5页面这种，可以预知风险的，大项目真的不推荐，你不知道哪天项目经理从哪里看来一个方案说人家做的了，你用vue3，你引不了库，芜湖van蛋 打包不了可能是这个问题 相继引入了vue-router,vuex,e
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 6217
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
网站运行后报错：[Vue warn]: Error in created hook (Promise/async): "TypeError: Cannot read properties of undefined (reading 'get')" 怎么解决
最新发布
06-07
另外，还有一种情况：我们可能使用了自定义的axios实例，但是该实例的创建出现了问题。示例：创建自定义实例```javascript//request.jsimportaxiosfrom'axios'constinstance=axios.create({baseURL:'/api',timeout:...
vue 出现 Cannot GET / 的问题
Macao7_W的博客
08-15 1804
vue 出现 Cannot GET / 的问题
HbuilderX 构建Vue3运行后发生异常：Cannot GET /的问题
分享我的点点滴滴，在成长路上与你同行！
10-21 543
HbuilderX 构建Vue3运行后发生异常：Cannot GET /的问题
vue 项目启动报错“Cannot GET /”
ansheng02的博客
05-12 1210
vite项目npm run serve启动报错Cannot GET /（vue3）
Xiang_Gong_Ya_的博客
12-09 1614
【代码】vite项目npm run serve启动报错Cannot GET /（vue3）
【问题-vue-vuetify】vue执行npm run serve后浏览器端口：5000显示Cannot GET /
ChristinaXinny的博客
11-19 1967
vue执行npm run serve后浏览器报Cannot GET / 出现这个 在一开始建立好vue工程的时候仍然可以运行成功 但现在vue add vuetify后出现了npm run serve后浏览器报Cannot GET / 不行 会报错 WARN There are uncommitted changes in the current repository, it’s recommend 进入5000的端口 网上都是这种答案 https://blog.youkuaiyun.com/tiven_/arti
Vue项目启动提示Cannot GET /
热门推荐
weixin_42486438的博客
09-09 1万+
1、初始化Vue框架，配置路由启动项目，控制台中并没有报错；npm run dev命令行窗口也没有报错，页面打开却提示Cannot GET / 2、网上查了下资料，有这几种解决方案： 1）、打包的时候会把config文件夹下的assetsPublicPath改成了 "./“ ，再次编译npm run dev却没有改回来 ，去掉 . 改回来就可以 2）、注释掉路由router文件夹下index.js的history模式 3）、把项目重新npm i...
vue项目本地启动后出现cannot GET /
weixin_30828379的博客
02-26 1229
vue项目本地启动后出现cannot GET /，报错页面如下 经过一番排查之后发现是配置文件出现错误，以致有的资源找不到。在config目录下的index.js文件中，某段配置信息如下 箭头处加了一个"."，变成"./"，所以资源加载出错了。解决办法就是将"."去掉，还原 接下来运行就没问题了。 转载于:https://www.cnblogs....
Cannot GET
03-19
### 解决方案 #### 1. **错误原因** `Cannot GET` 是一种常见的 HTTP 错误，通常表示客户端尝试访问某个资源时，服务器无法找到该资源或未正确处理请求。这种问题可能由多种因素引起，例如路由配置不当、静态文件路径错误或 Nginx/Apache 配置不匹配。 根据提供的引用内容[^4]，可以确认此问题可能是由于前端框架（如 Vue.js 或 React）与后端服务之间的路径映射不一致引起的。具体来说，`${window.SITE_CONFIG['cdnUrl']}` 被解析为 `./`，导致实际请求的 URL 不符预期。 --- #### 2. **解决方案** ##### 方法一：调整 Express 插件配置 通过引用内容[^2]可知，在使用 Express 构建的应用程序中，可以通过设置正确的路径来解决问题。以下是具体的实现方式： - 如果项目运行在本地开发环境，则需要确保启动命令指向正确的根目录。 - 当前项目结构如下所示： ``` project/ ├── public/ │ └── static/ │ └── doc/ │ └── MRP.docx └── app.js ``` - 修改 Express 应用中的静态文件路径配置： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 设置静态文件夹 app.use('/static', express.static(path.join(__dirname, 'public/static'))); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => console.log('Server running on port 3000')); ``` 上述代码片段设置了 `/static` 映射到 `public/static` 文件夹，从而解决了路径冲突问题。 --- ##### 方法二：Nginx 反向代理配置 基于引用内容，当应用部署至生产环境时，需检查 Nginx 的反向代理配置是否正确。以下是一个典型的 Nginx 配置示例： ```nginx server { listen 80; server_name localhost; location /mrp/ { proxy_pass http://localhost:8010/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /static/ { alias /var/www/project/public/static/; } } ``` 在此配置中，`location /mrp/` 将请求转发给后台服务；而 `location /static/` 则用于提供静态资源支持。这有助于避免因路径拼接错误而导致的 `Cannot GET` 报错。 --- ##### 方法三：Vue.js 中 CDN 地址修正 对于前端部分，如果采用 Vue.js 开发并依赖动态变量 `${window.SITE_CONFIG['cdnUrl']}` 来加载资源，则应确保其值始终有效。建议将其替换为绝对路径而非相对路径。例如： ```javascript export default { data() { return { fileUrl: '/static/doc/MRP.docx' }; } }; ``` 或者直接指定完整的域名地址作为基础路径： ```javascript const SITE_CONFIG = { cdnUrl: 'http://example.com/' }; export default { data() { return { fileUrl: `${SITE_CONFIG.cdnUrl}static/doc/MRP.docx` }; } }; ``` 以上更改可减少因路径解析失败引发的问题。 --- #### 3. **注意事项** 尽管提供了几种常见场景下的修复策略，但在某些情况下仍需进一步排查潜在隐患。例如： - 确认 Webpack 打包后的入口文件位置； - 测试不同浏览器的行为差异； - 检查防火墙规则以及 SELinux 是否阻止了特定端口通信。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值