详解vuejs中执行npm run dev出现页面cannot GET/问题

1.问题描述

最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npm run dev之后出现如下的情况:

1.浏览器中无法呈现已有页面,并且在浏览器控制台中报404错误

2.命令窗口中并没有报错

其中有人说是路由等问题,后来通过创建新的项目对比配置文件信息,发现是配置信息导致:

注释部分是打包时需要修改的地方(根据打包时网站根目录,这个没处理好可能会出现图片路径加载失败问题),而上面才是在开发环境下需要的配置信息(怪自己没留意,坑了自己),之后就可以正常跑了...

由于有多个网友反映并没有修改上面的publicPath,但是执行run命令之后还会出现上述情况,追其原因是除此之外还修改了config目录下的assetsPublicPath路径,将其还原为你自己打包前的路径即可.

2017.8.29

最近又有网友说到这个问题，按照以上说的方面检查了一下，还是出现了这个问题，查了一下出现这个问题的原因还可能跟node的版本还有npm版本相关，所以要把node升级较高版本，vue-cli要基于3.0以上的版本支持。

那么这时候如果升级了node或者npm,那么就可能出现npm 报错问题,那么可以尝试删除npm重新安装

链接:http://www.howtobuildsoftware.com/index.php/how-do/bYRH/nodejs-npm-npm-doesnt-work-get-always-this-error-error-cannot-find-module-are-we-there-yet

2017.8.30

今天又发现了关于这个问题的一个原因，是由于创建项目的时候用了ESLint语法检测，所以一点语法规范都会造成找不到页面，并且这些错误是在控制台是可以找到的。

如有新方法,将会继续更新!!!

到此这篇关于详解vuejs中执行npm run dev出现页面cannot GET/问题的文章就介绍到这了,更多相关vue执行npm run dev出现页面cannot GET/内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com

  • 安装vue-cli报错 -4058 的解决方法

    安装vue-cli报错 -4058 的解决方法

    本人在安装vue脚手架时报这样的错,我访问了漫山遍野还是没找到答案,有人叫我用cnpm安装,但是cnpm安装的vue有好多坑在里面: npm WARN checkPermissions Missing write access to C:\Users\liuyg\AppData\Roaming\npm\node_modules\vue-cli\node_modules\cliui\node_modules\wordwrap npm ERR! path C:\Users\liuyg\AppData

  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ

  • Vue 报错TypeError: this.$set is not a function 的解决方法

    报错场景:将APi中得到的response数据,用Vue$set()使数据动态响应 报错代码: methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to

  • vue.js 中使用（...）运算符报错的解决方法

    今天在起别人项目的时候, 发现报错. 这个错误是,项目中不识别es6的扩展运算符, 解决方式很简单. // 第一步 cnpm install babel-plugin-transform-object-rest-spread // 第二步 看一下你的 .babelrc 里面是否有识别es6语法的配置 { "presets": [ ["env", { "modules": false, "targets": { "br

  • 详解vue 兼容IE报错解决方案

    IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promise 等新的对象或者方法. 例如 Promise .新的原生方法如 String.padStart (left-pad) 等.为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术. 简单的说,兼容问题

  • 详解Vue项目在其他电脑npm run dev运行报错的解决方法

    详解Vue项目在其他电脑npm run dev运行报错的解决方法

    一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • 详解vue中引入stylus及报错解决方法

    详解vue中引入stylus及报错解决方法

    前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html 安装stylus 好了,建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在.vue文件的style块中使用,一种是引用.styl文件的形式 在.vue文件的style块中使用 这个很简单,只要

  • 关于vue的语法规则检测报错问题的解决

    搭建了一个vue项目,在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,结果我一句一句对照,修改相当之费时间,效率低,一上午,一个路由配置都没写好 主要报错如下: 截取了一段常见报错,选取其中一个: Expected indentation of 4 spaces but found 1 tab 翻译一下,意思是:预期缩进4个空格,但找到1个选项卡.意思是vue在检测写法规则的时候,只认空格,不认tab的缩进,这时你就要修改的页面内容,把tab换成空格,这样就比

随机推荐