Vue项目中使用webpack配置了别名,引入的时候报错
chainWebpack(config) {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
},
这是vue.config.js里的配置
使用的时候,要在别名前面加上~,这样就会告知加载器这是一个模块,而不是绝对路径
记住,在script部分或者js里引入的时候,不需要加 ~,直接用别名就行
只有在template和style里引入的时候需要加
例子:
<template>
<div class="login">
<div class="team-name">
<img src="~assets/img/login/team-name.png">
</div>
<div class="form-box"></div>
</div>
</template> <script>
import 'assets/login/login.js' export default {
name: 'Login'
}
</script> <style scoped lang="scss" type="text/scss">
.login{
width: 100px;
height: 100px;
background-size: auto;
background: #1b2c5f url(~assets/img/login/login-ba.png) no-repeat center; .team-name{
position: fixed;
width: 50px;
left: 40px;
top: %;
transform: translateY(-%);
}
}
</style>
有个小问题,使用webstrom开发的时候,style里使用别名引入,会有红线,不知道怎么解决
Vue项目中使用webpack配置了别名,引入的时候报错的更多相关文章
- vue项目中vscode格式化配置和eslint配置冲突
问题描述 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行.空格.单双引号.分号等各种格式问题 因为我的 vscode 安装使 ...
- 项目中遇到Uncaught TypeError: Converting circular structure to JSON报错问题
最近公司项目中出现一个报错Uncaught TypeError: Converting circular structure to JSON,,根据上述报错可以知道代码是运行到JSON.stringi ...
- vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)
webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...
- vue项目中router路由配置
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- vue项目中在同一页面多次引入同一个echarts图表的自适应问题
在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...
- Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- Vue项目中遇到的一些问题总结
一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...
随机推荐
- appium框架之bootstrap
(闲来无事,做做测试..)最近弄了弄appium,感觉挺有意思,就深入研究了下. 看小弟这篇文章之前,先了解一下appium的架构,对你理解有好处,推荐下面这篇文章:testerhome appium ...
- 安装appium桌面版和命令行版
一 桌面版(打开很慢,常用于辅助元素定位) 1.官网下载window版本: 2.直接点击紫色图标即可打开 3.启动server 二 命令行版(打开很快,常用于执行脚本) 1.jdk 安装jdk并 ...
- Python——序列化模块
#json 模式 1.dumps.loads 方法 针对内存 dic = {'k1':'v1'} #转换成json import json str_d = json.dumps(dic) #序列化 ...
- Jupyter Notebook(推荐使用Anaconda安装)
一.Jupyter Notebook介绍 1.简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文档编写.运行代码和展示结果. 简而言之,Jupy ...
- Docker 错误 docker: invalid reference format. 的解决
运行 docker run –it –v /dataset:/dataset –v /inference:/inference –v /result:/result floydhub/pytorch: ...
- P1313 计算系数
题目描述 给定一个多项式(by+ax)k(by+ax)^k(by+ax)k,请求出多项式展开后xn×ymx^n \times y^mxn×ym项的系数. 输入输出格式 输入格式: 共一行,包含555个 ...
- 基于Elastalert的安全告警剖析
https://www.freebuf.com/sectool/164591.html *本文作者:bigface,本文属 FreeBuf 原创奖励计划,未经许可禁止转载. elastalert 是一 ...
- 使用svn进行协作开发
环境 操作系统:win7 64位 所需工具 1. 服务器端(Subversion)[Setup-Subversion-1.8.16.msi] 2. 客户端(TortoiseSVN)[TortoiseS ...
- ACM-ICPC 2018 徐州赛区网络预赛 F Features Track(STL模拟)
https://nanti.jisuanke.com/t/31458 题意 有N个帧,每帧有K个动作特征,每个特征用一个向量表示(x,y).两个特征相同当且仅当他们在不同的帧中出现且向量的两个分量分别 ...
- JAVA发红包案例
模拟拼手气红包* 对于指定总金额以及红包个数,可以生成不同金额的红包,*,每个红包金额随机生成. * 分析这个题目:* 1.首先需要一个分发红包的方法.输入的参数是 总金额 以及 红包个数.* 按照这 ...