记录开发知识管理平台遇到的坑

@sakila1012 2018-11-08 07:52:40发表于 sakila1012/blog

写在前面

开发工作进行将近半个月,目前工作遇到的瓶颈还是挺过

1. 使用vue-upload-component 上传文件,文件夹遇到的坑

上传文件的后缀名问题

设置 extentions: undefined,即可上传所有的文件类型

2. 侧边栏导航刷新无法保存状态

this.$refs.menu.updateActiveName()

3. 使用vuex 状态问题,刷新后状态没有了

vuex 可以使用插件,所以引入了vuex-along

4. 在自定义组件中使用vuex,触发事件,保存信息

比如
this.$store.commit('getCurrentUser', userInfo)
往往在触发事件时,都会报失败的信息,commit undefined,而且在调试的过程中,会发现this对象中没有$store,困了好久

直接在该组件中引入 store.js 就可以了。

5. 自定义组件中 name 的使用,发现很少用到,而且觉得 name 好像没有作用,可有可无的,但它既然存在了,肯定有作用的,查了下:

6. vue-cli3 IE中不支持方法'assign'

在vue.config.js 中配置

具体配置如下

configureWebpack:(config)=>{
    //入口文件
    config.entry.app = ['babel-polyfill', './src/main.js'];
    //删除console插件
    let plugins = [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console:true,
            drop_debugger:true
          },
          output:{
            // 去掉注释内容
            comments: false,
          }
        },
        sourceMap: false,
        parallel: true,
      })
    ];
    //只有打包生产环境才需要将console删除
    if(process.env.VUE_APP_build_type=='production'){
      config.plugins = [...config.plugins, ...plugins];
    }
  },

7. IE 浏览器兼容性 SCRIPT5007: 无法获取未定义或 null 引用的属性“forEach”

8. 今天遇到了一个问题,兼容 IE 反选和全选问题,兼容了 IE 10,却在 IE 11 不能生效,发现 IE 10 和 IE 11 的引擎不一样

通过

window.navigator.userAgent

获取的结果不一致
IE 10 是包含 MSIE
IE 11 是包含 Trident

9. 无意中发现 vue-cli3打包组件的图片资源问题,导致打包后在页面中显示的是仍然是相对路径,并不会被解析成打包后的路径。

解决方法:
在 *.vue 中使用
我们可以通过 Vue CLI 提供的客户端环境变量 process.env.BASE_URL 来获取 baseUrl:

Vue.prototype.$baseUrl = process.env.BASE_URL
// 在 <template> 下使用
<img :src="`${$baseUrl}imgs/my_image.png`">

上面的解决方案还是有问题

<img :src="`${$baseUrl}imgs/my_image.png`">

上面的解决方案还是有问题的

<img :src="src">

在 script 引入该图片,并在data中定义

在 css 中是引入

url('~@/assets/img/toolbarButton-zoomOut.png');