vue开发常见问题记录

vue开发过程中遇到的一些小问题、小技巧等，会不断更新~

记录不详细处，欢迎留言🎉

1.设置路径别名，以后再引入static/util/Geometry.js 文件时可以这样写：

import geometry from '@/util/Geometry'

 

2.使用前端组件引入自定义标签时eslint会报错，可以加入一下配置忽略检查

'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]

 

3.打包后部署出现空白页，修改assetsPublicPath

 

4.iview图标build后不显示的问题

 修改webpack.prod.conf.js文件  extract: false

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: false,
      usePostCSS: true
    })
  },

或者修改build/utils文件，添加

publicPath: '../../'配置

 // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../', // 解决打包后iView的icon不显示的问题
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

 

5.开启Gzip

 

6.修改数组vue不能侦测到变化

例如，需要修改数组最后一项的值，可以这样

// 不可以直接使用this.layers[index][2] = '',这样VUE侦听不到数组的变化，不会触发view变化
this.layers[index].pop()
this.layers[index].push('')

不过，vue对数组进行了增强，可以更优雅：

Vue.$set(array,  index,  value)
this.$set(array,  index,  value) // 实例中使用

 7.控制台出现Uncaught (in promise)错误，

在main.js加入如下内容：

// fixed 'Uncaught (in promise)' error 
import Router from 'vue-router' 
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

 或者删除node_modules文件夹，重新npm install

8.引入iconfont编译报错，

最后发现删除了webpack.base.conf.js中的style-loader!css-loader重新编译就好了

 9. key值重复报错

使用index绑定到key即可避免

10.使用sass时报错Module build failed: TypeError: loaderContext.getResolve is not a function

 可能是sass-loader的版本过高导致，可以试试：

cnpm install sass-loader@7.3.1 -D

另外说明一下vue项目中使用sass的配置：

1.安装node-sass和sass-loader

cnpm install node-sass sass-loader@7.3.1 -D

2.build\webpack.base.conf.js的rules中增加配置

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        exclude: /node_modules/
      },

3.在style标签中增加lang="scss"

<style lang="scss" scoped>

</style>

11.编译时提示：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" } 

可能是因为prettier导致，重新安装prettier即可

cnpm install prettier@~1.12.0 -D

 12.覆盖element-ui组件的默认样式

以Element UI的Date Picker为例，默认样式是这样的：

 

 

 而我想要的是这样的：背景色、字体大小颜色、以及每个数字占据的空间大小都会改变。

步骤如下：

1.在使用该组件的vue文件里面新增加一个style标签，不加scoped属性

<style lang='scss">
// 查找组件的class，重写需要的样式
</style>a

2.查找需要修改的样式的元素的class，重写样式即可：

<style lang="scss">
$fontColor: #fff;
$backgroundColor: #555;
$SelectBackgroundColor: rgba(250, 250, 250, 0.1);
.el-date-editor {
  background-color: $backgroundColor;
  color: $fontColor;

  .el-range__close-icon,
  .el-icon-date,
  .el-range-separator {
    color: $fontColor;
  }
  .el-range-input {
    color: $fontColor;
    background-color: $backgroundColor;
  }
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: $backgroundColor;
}

.el-picker-panel {
  width: 512px;
  color: $fontColor;
  background-color: $backgroundColor;
  .el-picker-panel__icon-btn {
    color: $fontColor;
  }
  .el-date-range-picker__header {
    height: 24px;
  }
  .el-date-table {
    th {
      color: $fontColor;
      padding: 2px;
    }
    td {
      span {
        height: 20px;
        width: 20px;
        line-height: 20px;
      }
      div {
        height: 26px;
      }
    }
  }
  .el-date-table td.in-range div {
    background-color: $SelectBackgroundColor;
  }
}
</style>

3.因为新写的样式没有scoped属性，会影响其他也用到Date Picker的页面，

如果只想让重写的样式只作用一个组件，可以给Date Picker添加自定义类名，重写样式时添加上类名即可：

html:

<el-date-picker
      class="custom-date-picker"
      popper-class="custom-date-picker-popper"
      type="daterange"
      align="right"
      unlink-panels
      v-model="date"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>

       注：

     1.class="custom-date-picker"是为el-date-picker添加的类名，
     2.下面选择日期的弹出框比较特殊，通过popper-class为其绑定了class="custom-date-picker-popper"

css:

<style lang="scss">
$fontColor: #fff;
$backgroundColor: #555;
$SelectBackgroundColor: rgba(250, 250, 250, 0.1);
.custom-date-picker.el-date-editor {
  background-color: $backgroundColor;
  color: $fontColor;

  .el-range__close-icon,
  .el-icon-date,
  .el-range-separator {
    color: $fontColor;
  }
  .el-range-input {
    color: $fontColor;
    background-color: $backgroundColor;
  }
}

.custom-date-picker-popper.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: $backgroundColor;
}

.custom-date-picker-popper.el-picker-panel {
  width: 512px;
  color: $fontColor;
  background-color: $backgroundColor;
  .el-picker-panel__icon-btn {
    color: $fontColor;
  }
  .el-date-range-picker__header {
    height: 24px;
  }
  .el-date-table {
    th {
      color: $fontColor;
      padding: 2px;
    }
    td {
      span {
        height: 20px;
        width: 20px;
        line-height: 20px;
      }
      div {
        height: 26px;
      }
    }
  }
  .el-date-table td.in-range div {
    background-color: $SelectBackgroundColor;
  }
}
</style>