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 ...
随机推荐
- 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较
JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 ...
- [BZOJ2729]:[HNOI2012]排队(组合数学)
题目传送门 题目描述 某中学有n名男同学,m名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不同的) ...
- java实验报告&第三周学习总结
实验报告: 实验1:求水仙花数在C语言中求水仙花数是一个复杂且长的代码,在java中可以通过简单的代码来实现操作,找出水仙花数: 图例如下: 试验2:求13+23-33+43-53.........9 ...
- Mysql锁表问题解决过程
开发中难免会遇到数据库操作锁表问题,这里说下解决过程,算是记录了. show OPEN TABLES where In_use > 0; 查看哪些表被锁了 show processlist 查看 ...
- LinkedList Stack
- 中国MOOC_零基础学Java语言_第7周 函数_1分解质因数
第7周编程题 查看帮助 返回 第7周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...
- 求方程x1+x2+x3=15的整数解的数目
求方程x1+x2+x3=15的整数解的数目要求0≤x1≤5,0≤x2≤6,0≤x3≤7.解:令N为全体非负整数解(x1,x2,x3),A1为其中x1≥6的解:y1=x1-6≥0的解:A2为其中x2≥7 ...
- python+selenium元素定位之XPath学习01
参考文档1:https://www.w3school.com.cn/xpath/xpath_syntax.asp 参考文档2:https://www.runoob.com/xpath/xpath-tu ...
- centos7里创建用户和组
1.创建组distro,其GID为2019groupadd -g 2019 distro 2.创建用户mandriva, 其ID号为1005:基本组为distro useradd mandriva - ...
- 第九周课程总结&实验报告7
实验任务详情: 完成火车站售票程序的模拟.要求:(1)总票数1000张:(2)10个窗口同时开始卖票:(3)卖票过程延时1秒钟:(4)不能出现一票多卖或卖出负数号票的情况. 实验代码: package ...