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 ...
随机推荐
- centos 6.8 搭建svn服务器
1. yum remove subversion #卸载 svn服务 2.下载svn服务器安装包 yum -y install subversion 3.创建SVN版本库 mkdir -p /opt/ ...
- gitignore的使用
gitignore的作用是忽略文件的提交,被加入到gitignore中的文件不会被提交到文件服务器 通常需要添加到.gitignore的文件有: (1)缓存相关文件,编译相关文件,运行时相关文件 (2 ...
- layui 日期初化一个月前
lay('.test-item').each(function(){ var d = new Date(); laydate.render({ elem: this ,max: 0 ,value: d ...
- Azure - Create your first function using Visual Studio
Azure Functions lets you execute your code in a serverless environment without having to first creat ...
- js 实现论坛评论模块原理
<body> <table id="tb" border="1"> <tbody id="tbd"&g ...
- [HackerRank]New Year Chaos[UNDONE]
Input (stdin)Download 2 8 5 1 2 3 7 8 6 4 8 1 2 5 3 7 8 6 4 Your Output (stdout) Too chaotic Too cha ...
- tomcat8 源码分析 | 组件及启动过程
tomcat 8 源码分析 ,本文主要讲解tomcat拥有哪些组件,容器,又是如何启动的 推荐访问我的个人网站,排版更好看呦: https://chenmingyu.top/tomcat-source ...
- Oracle 查看链接数、创建索引等的DDL语句
select count(*),machine from v$session group by machine 今天打算将一个数据库的索引在另一个测试库上重新创建一遍,研究了一下. set pages ...
- User-Agent 请求消息头
User-Agent User-Agent, 用户代理 请求消息头,其中包含了 客户机.客户端 的一些信息, 如 浏览器版本 和 类型, 操作系统的类型等. 具体解析 步骤, 推荐以下 博客文章 ...
- Windows启动过程(MBR引导过程分析)
catalogue . 电脑启动过程 . MBR分析(master boot record) - 位于整个硬盘的 扇区 . DBR(DOS boot record) - 位于柱面0,磁头1,扇区1,即 ...