VUE二级路由刷新时报错Uncaught SyntaxError: Unexpected token '<' (at app.js:1:1)
在使用vue搭建运行一个项目时,碰到一个奇怪的问题,从首页跳到二级页面的话页面能正常显示,但是在二级页面里刷新的时候页面就白屏了,然后在控制台中发现有报错:UncaughtSyntaxError:Unexpectedtoken'<'(atapp.js:1:1) <!DOCTYPEhtml>。比如访问:http://127.0.0.1:4567/正常,从这个页面跳转到:http://127.0.0.1:4567/article/128时也正常,但是在这个 http://127.0.0.1:4567/article/128页面刷新时就不正常了。我的项目使用的是history模式。 &nbs...[>>…]
关于Sentry前端监控部署及其简单使用
在一个开源的产品中看到了一行错误追踪,下面调用了一个Sentry.init方法,通过了解后发现这是一个错误追踪的工具。于是进行了进一步的了解。Sentry是一个开源的实时错误监控的项目,它支持很多端的配置,包括web前端、服务器端、移动端等。支持各种语言,例如python、oc、java、node、javascript等。也可以应用到各种不同的框架上面,如前端框架中的vue、angular、react等最流行的前端框架。简单的说就是通过Sentry,我们可以方便地在客户端进行错误上报,然后在Sentry服务端可以直接查看这...[>>…]
This dependency was not found:* @XXX.js in ./src/main.js
一个在正常运行的vue项目,我下载下来代码后进行编译报错,内容如下: Thisdependencywasnotfound:*@/lib/commonStorage.jsin./src/main.js Toinstallit,youcanrun:npminstall--save@/lib/commonStorage.js <s>[webpack.Progress]100% 根据报错提示,然后在lib的目录下发现存在一个文件:CommonStorage.js,而在代码中main.js中导入的代码行如下:import{commonStorage}from'@/lib/commonStorage.js' 仔细看可发现大小写对不上,可以修改import这行代码,也可...[>>…]
推荐Vue3数据大屏模板vue-datav-chart
业务程序中少不了需要使用大屏来展示统计的数据,推荐一个好用的Vue3数据大屏模板vue-datav-chart。vue-datav-chart是基于vue3.x+echarts+antv构建的数据可视化大屏展示模板,包含各种动态图表、地图展示等功能。用起来方便简单。演示地址:http://upholdjx.gitee.io/vue-datav-chart/#项目gitee地址:https://gitee.com/solovejack/big-screen-vue-datav使用方法:1.克隆项目gitclonehttps://gitee.com/upholdjx/vue-datav-chart.git#2.进入目录cdvue-datav-chart3.安装依赖npminstall4.本...[>>…]
vue中对<el-input>输入框的数据进行整数校验
vue中要对一些<el-input>输入框进行数据校验,比如必须是数字,可以方便用@监听一些事件,比如keyup键盘弹起事件来重置input里面必须只是数字。如下: #html代码 <el-form-itemlabel="score"prop="score"> <el-inputv-model="form.score"placeholder="必须是整数"@keyup.native="checkInt"/> </el-form-item> <el-form-itemlabel="age"prop="age"> <el-inputv-model="form.age"placeholder="必须是整数"@keyup.native="checkInt"/> </el-form-item&g...[>>…]
Vue调用后台api接口时发现%E2%80%8B特殊字符
一次在使用vue调用后台API时发现前端未按预期加载出数据,但按执行流程确实是正常调用了配置的服务端API,后经过认真排查发现调用的服务端url里面出现了特殊的字符%E2%80%8B,示例:/api%E2%80%8B/getuser%E2%80%8B/score%E2%80%8B/。但从vue文件中并没有看到这些特殊字符。原来我的这段网址是从一个html页面上复制下来的,通过查看页面的源码发现确实就存在这些字符。但显示没有任何异样。 %E2%80%8B是个什么特殊字符呢?通过页面源码可以看到它就是​这个...[>>…]
VScode编辑时碰到输入代码只能更改不能插入的情况
在使用VScode编辑时之前时不时地碰到输入代码只能更改不能插入的情况,即你输入字符只会替换光标前的字母,而不会在后面新增,就像是在word里进入了非insert模式。但此时通过按insert键并没有作用。出问题后切换一下页面或者做点别的什么回来又好使,一直没有找到原因,今天再次碰到这个情况时发现它和我在编辑的过程中使用了Ctrl+Space有关系。之所以在编辑的过程中使用快捷键Ctrl+Space,是因为我需要切换输入法。然而问题就是出在这里。 VSCode中的快捷键Ctrl+Spa...[>>…]
Element-ui select下拉框默认值-表格条件加颜色及多字段显示处理
Element-ui里要给select设定默认值,可以通过v-model绑定select的值,然后设置option的value即可。需要注意的是v-model绑定的值与option选项value值类型需要一致,不然下拉菜单可能默认显示具体的value值而不是对应的文本。如下示例: <el-form-item> <el-selectv-model="value"> <el-optionv-for="iteminitems":key="item.id":label="item.name":value="item.id"></el-option> </el-select> </el-form-item> 在进行表格展示的...[>>…]
Export和Export default的区别
现在Vue开发中每个vue文件中都会使用Export,而在ES6以前的js开发中是没有这些库的。在ES6前端要实现模块化需要借助第三方js库,而现在ES6自带模块化(在ES6中一个js文件代表一个js模块module),也是JS第一次支持module,可以直接用import和export在浏览器中导入和导出各个模块。 ES6,全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版。ES6主要是为了解决ES5的先天不足,比如JavaScript里并没有类的概念,ECMA是国际化标准组织(Europeancomputermanuf...[>>…]
ElementUi设置el-table-column宽度百分比无效,vue-cli-service不是内部或外部命令
在vue中使用Elementtable组件时的时候,发现设置el-table-column为百分比,每一列都特别窄,根本不会达到预期效果。Vue中要将宽度设置成百分比的话,不能通过设置width来实现,而是要设置min-width,并且每一列都必须设置min-width。el-table组件会被vue解析成html,Vue直接把百分号去掉把数值当做列宽来呈现,且单位是px。 需要注意的是:width,min-width的原理都是将值百分比去掉变成px。可是min-width会按照比例分配剩余空间。并非直接算的百分比。(因此要每一...[>>…]