記錄使用 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>