1.标题vue由静态路由改为动态路由时,出现错误Cannot find module xxx

在这里插入图片描述

// 静态路由懒加载
export const loadView = (view: any) => {
  return () => import(`@/views/${view}.vue`)
}

改为下面的代码就正常了

export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}.vue`], resolve)
}

错误原因是webpack打包逻辑,webpack4中动态import不支持变量方式,查看路由返回的信息,只是返回一个方法。

原来是用import导入的 : // 静态路由懒加载 export const loadView = (view) => { return () => import(@/views/${view}.vue) }

改为require引入方式::export const loadView = (view) => { return (resolve:) => require([@/views/${view}.vue], resolve) }

2.element ui 重置表单后无法输入的问题

使用:this.$refs[formName].resetFields();
结果:重置表单后,部分输入框无法输入文字
解决方法:给所有表单项默认给一个空值

filterForm:{
	name:'',
	address:''
}

3.element-ui DatePicker 日期选择框无法修改日期

可能是value-fomat的值给错了,比如年月日的日,是dd小写,而不是大写DD

4.vue导出或下载表格,提示文件格式和拓展名不匹配

我本次遇到的问题,原因是请求未设置以下内容:

responseType:'blob'

设置完之后就正常了,完整代码:

this.$axios.get('/XX/XX',{
	 params: params,
	 responseType: 'blob'   //首先设置responseType字段格式为 blob
}).then(res => {
	console.log(res);
	let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
	let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
	let a = document.createElement("a");
	a.href = url;
	a.click();
	// 释放这个临时的对象url
	window.URL.revokeObjectURL(url); 
});

5.日期组件当type=“datetime“ 报错 mask.replace is not a function

好家伙,这个居然是因为我在vue上挂载了全局方法dateFormat,原来element 计算属性里也有这个dateFormat,于是我把全局方法的名字修改一下就好了。

6.关于Element UI中date-picker在IE11浏览器中设置的值无法显示

添加value-format参数来绑定值的格式即可:

 value-format="yyyy-MM-dd hh:mm:ss"

如果仍然想给后台传递date对象格式的数据,在提交的时候重新new Date(‘date-picker的值’)一下就行了。

7.vue路由无论怎么跳转都只能显示首页的内容

因为这个账号没有菜单权限!!菜单是通过接口获取的数据生成的动态路由,因为没有权限,所有压根就没有生成动态路由,自然就怎么也跳转不过去了。

8.vue的router组件component在import时不能使用变量

webpack 编译es6 动态引入 import() 时不能传入变量,例如dir =’path/to/my/file.js’ ; import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。

但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。
图中使用了require,用import也是一样的

9.elementui中的表单自动校验问题

表单加载成功时,会自动执行rules校验,解决这个问题,一般都选择直接把出发方式改成blur,但是,我这样修改后,依然不好用,问题可能出现在我根据业务需要,修改了校验规则,也就是说rules发生了改变,这时需要添加官网说明的属性

:validate-on-rule-change=false	
<!--是否在 rules 属性改变后立即触发一次验证-->

将其设置为false,即可。

10.添加或删除成员时vue对象无法实时更新的解决方案

可以在实例中使用 s e t 和 set和 setdelete,也可以直接调用Vue的设置和删除。

this.$set(this.user,'name','张三')
this.$delete(this.age,' age ')

let vm=new Vue({ el : '#app ',
	data : {
	 	user:{}
	 } 
 })
Vue.set(vm.user,'name','张三')
Vue.delete(vm.user,'name')

11.vue-cli-service启动本地服务,指定文件

	"serve": "vue-cli-service serve",
    "serve2": "vue-cli-service serve ./src/main2.js",

上面是默认配置,指向main.js,下面是按自己需要指定启动入口文件。

Logo

前往低代码交流专区

更多推荐