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
andcss-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 intorequire('./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>