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 ...
随机推荐
- jq完成省市区街道四级联动
之前看的省市区街道四级联动的插件,感觉和公司要求的有些不符合,就自己写了一个 因为要读取本地json文件,所以要跑下服务器 下载browser-sync 然后在项目目录下运行browser-sync ...
- sqli-lab(8)
布尔型单引号GET盲注 发现加个单引号跟没加显示不一样,加了单引号连you are in都不显示了,没有报错,所以只能用盲注判断了 0X01爱之先了解 盲注需要掌握一些MySQL的相关函数:lengt ...
- 用命令行编译运行java文件的乱码问题
之前在写的时候没有遇到过这个问题,用惯了eclipse之后突然用Notepad++就出现乱码了 我在编写的时候 指定Noepad++的编码是 UTF-8编码,然后进入命令行,编译的时候就出现了乱码 然 ...
- eclipse 简单配置
1.安装STS4 help-->Eclipse Maketplace-->search 'STS'-->install 2.代码提示 Window-->preferences- ...
- DjangoRESTFrameWork中的视图
DRF中的request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...
- HDU 6625 (01字典树)
题意:给定两个长为n的数组a和b:重新排列a和b,生成数组c,c[i]=a[i] xor b[i]:输出字典序最小的c数组. 分析:将a中的数插入一颗01字典树a中:将b中的数插入一颗01字典树b中: ...
- legend2---lamp.sh一键安装lamp环境需要爬的坑
legend2---lamp.sh一键安装lamp环境需要爬的坑 一.总结 一句话总结: 1.要记得更改项目权限:chown -R apache:apache /data/www/default/网站 ...
- d3d.h和d3d9.h混用的问题
d3d.h和d3d9.h混用的时候,一大堆错误,不管怎么调整包含顺序都不对,最后看到这个网址解决的http://www.programmer-club.com.tw/ShowSameTitleN/di ...
- 方法二破解:Excel工作表保护密码
最简单,复制整表,粘贴在全新的表中.但是有时候会丢失一些元素 在excel2016中实测验证过有效 第1步:在工作表菜单栏上添加[开发工具].方法是:依次单击[文件]--->[选项]---> ...
- TCP/IP 网络模型
前言 互联网是怎么构成的,又是怎么运作的?什么是 TCP/IP 网络?为什么远隔万里的计算机可以互相通信?计算机网络作为 IT 行业的基石,是工程师永远绕不开的话题. 计算机网络的分层体系结构 计算机 ...