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

写在前面

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

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');

sakila1012 / blog

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