记录使用 vue 遇到的一些问题

1. vue component 中的 asset url 如果想用webpack 配置的 alias 需要在前面加 ~ ,例如

  alias: {
    'assets': path.resolve(__dirname, '../src/assets')
  }

<template>
  <div id="app">
    <img class="logo" src="~assets/logo.png">

<script>
  import img from "assets/logo.png"
</script>

根据 这个isssue 的描述是

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~:

根据 文档 的描述是

By default, vue-loader automatically processes your style and template files with css-loader and the Vue template compiler. In this compilation process, all asset URLs such as <img src="...">, background: url(...) and CSS @import are resolved as module dependencies.

For example, url(./image.png) will be translated into require('./image.png')

感觉说的有点乱，总结就是 template, style 需要加 ~, script 里面的不需要加 ~

2. IE 11 下 webpack中使用 echart 报错，其他浏览器正常

问题描述： 在利用 vue-cli 搭建的环境中， 引入 echart 会发生echart TypeError: 调用的对象无效的错误
问题讨论： https://github.com/ecomfe/zre...

如果你是在 webpack 中使用 echarts，则 webpack 的 config 中 devtool 设置为含有eval时，可以重现该问题

解决方案：把 devtool 设置为不含有eval的方式， 比如 cheap-source-map(vue-cli 默认生成的开发配置是cheap-eval-source-map)

3. IE 11 下 链接无法跳转

问题描述：

<el-button type="primary">
    <router-link to="/login">登录</router-link>
</el-button>

解决方法: 把 <router-link> 放到外层

<router-link to="/login">
  <el-button type="primary">登录</el-button>
</router-link>