记录使用 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>
    原文作者:杨军军
    原文地址: https://segmentfault.com/a/1190000009606620
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞