vue项目启动之后出现cannot GET /

Vue中SCSS配置与加载器安装
最新推荐文章于 2024-05-09 16:26:51 发布
最新推荐文章于 2024-05-09 16:26:51 发布
阅读量2.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： vue项目启动之后出现cannot GET /
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31965515/article/details/83545828
本文解决在Vue项目中因未安装scss加载器导致的SCSS解析问题，详细介绍了如何安装并配置scss-loader和node-sass，确保SCSS在Vue项目的正确使用。
如何运行vue3并部署 并解决Cannot GET /的问题
克里斯蒂亚诺更新的博客
08-02 512
如果要部署：npm run build。运行npm run dev。在package.json。
vue项目启动出现cannot GET /服务错误的解决方法
11-21
上午做了项目，中午吃完饭后回来再跑一次服务器， 出现 Cannot GET/： 控制台中并没有报错；npm run dev命令行窗口也没有报错。 原因 在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同… 于是把能改的地方都改了…（基本上相当于将配置信息改回来） 关闭 history 模式 关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）； 更改端口号 更改端口号（没改的话打开原端口号自动加上登陆次数） 在 webpack.base.conf.js 配置信息里面，把自己改动的部分先注释掉再重新跑一下服务，在
vue项目启动后页面显示‘Cannot GET /’
weixin_45721912的博客
05-09 3683
1、npm run dev命令启动项目的时候没有报错，页面打开却提示 Cannot GET / 2.这个时候只需要找到config文件夹下面的index.js文件。把assetsPublicPath字符串的：‘./’修改成 ‘/’就行了。修改完之后记得关闭项目，然后重新启动。不然不会生效
vue项目启动之后出现cannot GET /问题
笔记库
08-15 1204
vue项目启动之后出现cannot GET /问题！！！ 这个错误，最后发现是在部署代码到服务器在打包代码之前自己有修改一些配置。 因为有改config/index.js 里面的assetsPublicPath:'./' 改成了./ 把这个地方改回原来的'/'就好了（注意有2个地方） 另外的一个地方是资源路径 ...
详解vuejs中执行npm run dev出现页面cannot GET/问题
10-15
主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue启动服务Cannot GET /问题
菜菜的博客
09-01 1280
在启动vue项目时，出现Cannot GET /提示，原因是之前修改了config下index.js的assetsPublicPath 错误提示： Refused to load the image 'http://localhost:8075/favicon.ico' because it violates the following Content Security Policy direct...
vue错误：Cannot GET /
m0_46250348的博客
07-27 469
一个页面写错导致
vue Cannot GET /的问题
weixin_41336523的博客
10-02 871
vue Cannot GET /的问题 再很久没有运行vue的某个项目的时候，npm run dev之后首页报错，用的是webpack-simple创建的项目，原因是不小心把这个删了 - -。真是粗心 ...
vue 出现 Cannot GET / 的问题
Macao7_W的博客
08-15 1822
vue 出现 Cannot GET / 的问题
vue(npm run dev) 出现了 Cannot GET /
magic_xiang的博客
07-26 3920
在启动vue项目的时候(npm run dev)出现了一个Error Cannot GET / 后来想了下是不是修改过哪里，原来是assetsPublicPath 在你的项目目录中找到  config/index.js 将assetsPublicPath: './' 改为 assetsPublicPath: '/'   即把英文句号去掉，然后重新启动即可  ...
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_43398729的博客
03-19 250
webpack.base.conf.js中的 publicPath配置问题 修改config>index.js里的assetsPublicPath删除 ‘.’ 修改前： 修改后：
vue项目出现 cannot GET/ 的问题总结
热门推荐
似水流年
10-15 4万+
1.没有报错，页面显示cannot GET,经过排查发现config/index.js里的dev做了改动。他想实现pc和移动端跳转，所以修改assetsPublicPath: '/m/'。在移动端访问直接走'/m/#'。直接npm run dev跑不起来，需要改成assetsPublicPath: '/'就好了。 2.报错node出现 Error: listen EACCES 0.0....
vue cannot get / 报错。。。
weixin_30487701的博客
05-28 328
问题描述：旧电脑退休，把项目拷贝到新电脑上之后，运行不起来了竟然，报错 cannot get / 解决方法：找了很多方法不行，因为代码在旧电脑可以运行，那就肯定是环境的问题了，准备尝试再初始化一个项目看看啥效果，一不小心就找到了iview项目的初始化流程，对，我的项目是基于iview的推荐工程起步的 //Install // install dependencies npm ...
vue项目启动出现cannot GET /服务错误
猫猫的小茶馆
06-22 4万+
上午做了项目，中午吃完饭后回来再跑一次服务器， 出现 Cannot GET/： 控制台中并没有报错；npm run dev命令行窗口也没有报错。 原因 在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同… 于是把能改的地方都改了…（基本上相当于将配置信息改回来） 关闭 history 模式 关闭history模式，用/#/路由的方式开启，（h...
【Cannot GET /|VUE项目无法访问首页问题，node版本异常导致工程有问题，首页无法登陆】
x38160的博客
10-11 1438
Cannot GET /|VUE项目无法访问首页问题，node版本异常导致工程有问题，首页无法登陆
npm run dev (明明有.vue文件)，却报错 cannot GET
草巾冒小子的博客
11-21 381
npm run dev (明明有.vue文件)，却报错 cannot GET
vue3出现Cannot GET /
最新发布
03-27
<think>好的，我现在要解决用户提出的Vue3项目中访问根路径时出现'Cannot GET /'的问题。首先，我需要理解这个问题通常是什么原因引起的，然后根据用户提供的引用资料来找到可能的解决方案。 根据用户提供的引用，这个问题可能涉及多个方面，比如开发服务器的配置、入口文件的路径、构建步骤是否正确等等。例如，引用3提到使用Vite时，需要先运行npm run build再运行npm run serve，因为vite preview是用于预览生产构建的，而不是开发模式。引用4和5则讨论了入口文件的位置和Webpack配置的问题。 首先，我应该考虑用户的项目是否使用了Vite还是Webpack，因为不同的打包工具配置方式不同。用户提到是Vue3项目，可能更倾向于使用Vite，因为Vue3推荐Vite作为构建工具。但也不能排除使用Webpack的可能，比如旧项目迁移过来的情况。 接下来，可能的步骤包括： 1. **确认构建工具**：检查项目的package.json中的scripts部分，看看是使用Vite还是Webpack。例如，如果scripts中有"dev": "vite"，则是Vite；如果是"serve": "vue-cli-service serve"，则可能是Vue CLI（基于Webpack）。 2. **检查构建步骤**：如果使用的是Vite，引用3指出需要先构建再预览。用户可能直接运行了npm run serve（对应vite preview），但没有先构建，导致服务器没有内容可提供。因此解决方案应该是先运行npm run build，再运行npm run serve。 3. **入口文件配置**：引用4提到入口文件index.html不在根目录下或配置不正确。需要检查项目结构，确保index.html位于项目根目录，并且构建工具的配置正确指向该文件。例如，在Vite中，index.html默认应在根目录，且作为入口。 4. **开发服务器配置**：对于Webpack项目，引用5建议检查devServer的static配置，确保静态资源路径正确。如果路径配置错误，服务器可能无法找到入口文件，导致Cannot GET /错误。 5. **路由模式问题**：引用2提到将路由模式改为hash模式可能解决问题。但用户使用的是Vue3，如果使用了Vue Router，并且配置了history模式，可能需要服务器正确配置以支持前端路由。不过这在开发环境中可能不适用，因为开发服务器通常需要额外配置来处理history模式。但如果是生产构建后的预览，可能需要正确的服务器设置。 6. **依赖安装问题**：引用2和4提到重新安装依赖或检查配置，可能因为依赖缺失或配置错误导致服务器无法正确启动。运行npm install确保所有依赖正确安装。 总结可能的解决方案步骤： - 如果是Vite项目，确保先构建再预览。 - 检查入口文件位置和配置。 - 检查开发服务器配置，尤其是静态资源路径。 - 确保路由配置正确，必要时切换为hash模式测试。 - 重新安装依赖，排除依赖问题。 - 检查端口冲突或其他服务器启动问题。 需要逐步排查这些可能性，根据用户的具体情况应用相应的解决方案。</think>### Vue3出现"Cannot GET /"问题的解决方案 #### 一、确认构建工具类型 查看项目根目录下的`package.json`文件，确认scripts字段的配置： ```json // 如果是Vite项目： "scripts": { "dev": "vite", // 开发模式命令 "build": "vite build", // 生产构建命令 "preview": "vite preview" // 预览生产构建 } // 如果是Vue CLI（Webpack）项目： "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } ``` #### 二、针对Vite项目的解决方案 1. **正确使用预览命令** 如果执行`npm run dev`后出现错误，说明未正确启动开发服务器。 如果执行`npm run serve`报错（对应`vite preview`），需先构建项目： ```bash npm run build && npm run serve ``` 因为`vite preview`仅用于预览**已构建**的静态文件[^3]。 2. **检查入口文件位置** 确保`index.html`位于项目根目录，且包含正确的入口声明： ```html <!-- index.html需包含如下代码 --> <script type="module" src="/src/main.ts"></script> ``` #### 三、针对Webpack项目的解决方案 1. **配置devServer静态资源路径** 修改`vue.config.js`，添加正确的静态资源路径： ```javascript module.exports = { devServer: { static: { directory: path.join(__dirname, 'public'), // 指向静态资源目录 } } } ``` 确保静态文件目录包含`index.html`[^5]。 2. **检查路由模式** 在`src/router/index.ts`中暂时切换为hash模式测试： ```typescript const router = createRouter({ history: createWebHashHistory(), // 改为hash模式 routes: [...] }) ``` History模式需要服务端额外配置[^2]。 #### 四、通用排查步骤 1. **验证文件结构** 确保项目结构符合标准： ``` project-root/ ├── index.html ├── src/ │ ├── main.ts │ └── App.vue ``` 2. **清理缓存并重装依赖** ```bash rm -rf node_modules && rm package-lock.json npm install ``` 3. **端口冲突检测** 检查8080端口占用情况： ```bash lsof -i :8080 # macOS/Linux netstat -ano | findstr :8080 # Windows ``` #### 五、典型错误场景示例 **错误场景**：直接运行`vite preview`未构建 **现象**：控制台无报错但浏览器显示"Cannot GET /" **解决方案**： ```bash npm run build && npm run preview ``` **错误场景**：Webpack项目路径配置错误 **现象**：修改配置文件后未生效 **解决方案**： ```javascript // webpack.config.js module.exports = { devServer: { static: { directory: path.resolve(__dirname, '../dist') // 需指向实际输出目录 } } } ``` ####
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值