vue项目,webpack中配置src路径别名及使用
1、项目结构:

2、在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。

3、在js文件或者vue文件的script标签中使用:
(1)、js文件中导入示例:

(2)、vue文件中导入示例:

4、css(scss)文件在scss或者vue的style标签中导入示例:
(1)、在scss文件中导入示例:

(2)、在vue的style标签中导入示例:

注意:css或者scss样式导入需要使用 ~@ 开头。
5、在vue的template模板标签中引入图片路径示例(两种方式均可使用):
(1)、使用 ~@ 方式引入:

(2)、使用 @ 方式引入:

(3)、在scss 自定义方法中使用时必须使用 ~@ 方式引入:

6、完结。
vue项目,webpack中配置src路径别名及使用的更多相关文章
- vue项目webpack中Npm传递参数配置不同域名接口
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...
- vue项目webpack打包后图片路径错误
首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- webpack中配置eslint
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...
- 在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...
- Vue、webpack中默认的config.js、index.js 配置详情
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- VSCode中使用vue项目ESlint验证配置
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
随机推荐
- [BZOJ4804]欧拉心算:线性筛+莫比乌斯反演
分析 关于这道题套路到不能再套路了没什么好说的,其实发这篇博客的目的只是为了贴一个线性筛的模板. 代码 #include <bits/stdc++.h> #define rin(i,a,b ...
- Windows操作系统Apache服务器下配置PHP
在Apache web服务器上发布PHP项目之前,需要进行相应的配置,服务器才能解析php文本,正常显示php动态页面内容.在进行php配置之前默认已经在Windows系统下安装好了Apache服务器 ...
- multiple users to one ec2 instance setup
http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/managing-users.html usually when use pem file as ...
- xml文件中 xmlns xmlns:xsi 等解释
http://bbs.csdn.NET/topics/390751819 maven 的 pom.xml 开头是下面这样的 <project xmlns="http://maven.a ...
- Controller控制台Vuser虚拟用户的运行状态
Controller控制台Vuser运行的状态 Down:没有运行Pending:挂起Init:初始化Ready:准备就绪Run:正在运行Rendezvous:正在集结Passed:运行通过Faile ...
- Python 使用PyQt5进行开发(一)
Qt 是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器. 我们先简单使用Qt进行一个小工 ...
- leetcode-mid-others-621. Task Scheduler
mycode 53.01% 这个题在纸上画一画就知道啦,只要出现次数最多的字母能够满足要求,其他更少的字母穿插在其中,间隔就更满足<n啦,当然,最后不要忘记加上尾巴哦,尾巴和出现次数最多的字 ...
- acl权限设置
acl权限分配 1.setfacl设置文件或目录的权限 setfacl -m u:user:rw text setfacl -m user:rwx /mnt 2.getfacl查看文件或目录的权限 g ...
- Jmeter接口测试系列之判断测试结果
在使用jmeter进行接口测试时,我们需要根据测试用例判断其测试结果是否一致,判断其执行是否成功. 在jmeter中也可以使用响应断言去判断,但是有时我们需要根据不同的用例,其判断条件不同,所以这里我 ...
- springmvc中获取request对象,加载biz(service)的方法
获取request对象: 首先配置web.xml文件--> <listener> <listener-class> org.springframework.web.con ...