踩坑记录--vue2.0+elementUI开发遇到的问题

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的值才会加载，从而实现懒加载。

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

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

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

将其设置为false，即可。

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

可以在实例中使用$set和$delete，也可以直接调用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，下面是按自己需要指定启动入口文件。