【Vue.js搭建路由报错如何解决?】教程文章相关的互联网学习教程文章

vue单文件组件lint error自动fix与styleLint报错自动fix详解

问题描述之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配置后第一次跑lint居然报了几万个Error,且是在eslint加了--fix选项的情况下,且错误大多集中在顺序问题上也就是vue/order-in-components和order/properties-order的错误.以下是问题的解决方式及过程记录. stylelint中css属性顺序错误.stylelint的配置// .stylelint { "processors...

详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)

由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes、findIxdex等问题。 本人研究涉及到的环境:VueCli3.2 + iview 3.1.5在IE中不支持ES6的新特性,例如:includes、findIndex…… 以下方案可以解决该问题: 1. Github iview仓储Issues中提到的 改编译范围请用 transpileDependencies: [‘iview],不要用 include.add,因为默认配置里用了 exclude,在 webpack 中,多个条件同时存在时需要...

vuex 解决报错this.$store.commit is not a function的方法【图】

Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网,觉得不是很好理解,有的时候我们只是需要动态的从一个组件中获...

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: to,sign: md5(this.appKey + text + this.salt + this.key)},success: function (data) {this.$set(this.$data, translatedText, data.translation[0]...

Vue项目报错:Uncaught SyntaxError: Unexpected token <【图】

遇到问题: 今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题:控制台的提示:Uncaught SyntaxError: Unexpected token <按照提示进入文件,再看如下图:仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。 解决方案: 解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<script src="./static/utils/soc...

vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错【图】

前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed. 报错截图 问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token < 报错截图: 经过一番折腾,初步定位问题1在经过build/webpack.prod.conf.js的chunkhash打包后的JS文...

详解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。如果没有,使用 npm install cnpm ...

vuex2中使用mapGetters/mapActions报错的解决方法

解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread 。 接着在babel的配置文件 .babelrc 中应用插件: {"presets": [["es2015", { "modules": false }]],"plugins": ["transform-object-rest-spread"] } // {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["trans...

vue init webpack 建vue项目报错的解决方法

使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extension...

Vue2.x中利用@font-size引入字体图标报错的解决方法【图】

利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置有人这里会有重复的字体文件的配置,删除一项即可 出现的问题:引入字体图标出现问题 1.报错将字体引入的相对路径改成绝对路径 相对路径绝对路径2.不报错,但是出现的字体图标是小方框 有警告信息:小方块:报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀...

在vue中解决提示警告 for循环报错的方法

警告 1.出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false这样即可去除警告! 2.在build文件下的webpack.base.conf.js文件中, 将 ...(config.dev.useEslint ? [createLintingRule()] : []),注释掉, const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: eslint-loader, enforce: pre, include: [resolve(src), resolve(test)], options: { formatter: require(e...

vue如何解决循环引用组件报错的问题

问题由来最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样。按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决方案查询了网上各种资料之后,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件...

从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

如下所示: Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers今天遇到一个问题,将Vuex中数组的值赋给新的数组,新数组push时报上面的错误,代码如下 <code class="language-javascript">this.maPartListTable = this.$store.state.vehicleMa.maPartListTable; </code> this.maPartListTable.push(obj);经询问后得知,应该这么写 this.maPartListTable = this.$store.state.vehicleMa.maPartLi...

vue 解决循环引用组件报错的问题

做项目时遇到使用循环组件,因为模式一样,只有数据不一样。但是按照普通的组件调用格式来做时报错,错误信息为Unknown custom element: <pop> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 查询了官方文档,还有其他的资料,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。 解决的方式是全局引...

解决vue 引入子组件报错的问题

错误信息: Do not use built-in or reserved HTML elements as component id: header源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export default {name: layout,components: {header: header,aside: aside,footer: footer} } </script>原因: vue里面不允许使用 Html已有的标签作为自定义标签 修改方案: <script> import heade...