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 ...
随机推荐
- Spring Boot教程(二十四)Web应用的统一异常处理
我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来 ...
- [CSP-S模拟测试]:旅行计划(分块+DP)
题目传送门(内部题83) 输入格式 第一行两个整数$n,m$ 接下来$m$行,每行三个整数,$u,v,w$,表示从$u$到$v$有一条权值为$w$的边 接下来一行有一个整数$q$,表示$q$天 接下来 ...
- 【TIL】today i learned
20191115 JSON解析网站 https://www.json.cn/ 方便简洁,左侧放JSON表达式,右侧自动解析 联系英文盲打网站 https://www.keybr.com/ 字母 ...
- P1364 医院设置 (补锅,memset初始化较大值不可用0x7fffffff )
P1364 医院设置 题解 弗洛伊德水过 注意初始化一个大数 0x3f 可以,0x5f 好像也可以,但是0x7fffffff 我是真的炸了,初始化为-1 (后面补锅有详细解释) 代码 #include ...
- VASP学习笔记--输入输出文件
一.VASP 全称Vienna Ab-initio Simulation Package,是维也纳大学Hafner小组开发的进行电子结构计算和量子力学-分子动力学模拟软件包. 它是目前材料模拟和计算物 ...
- Jmeter之循环控制器
在使用Jmeter测试时,部分接口需要循环执行多次,这时候就可以使用循环控制器去控制执行. 循环控制器如下图: 说明 : (1.名称:标识,建议明确此循环控制器的使用的作用是什么(如:登录循环控制) ...
- c# 匿名委托递归
Func<List<int>, int> GetVirtualCode = null; // 递归不能直接=,要赋初值.微软得优化啊,这语法糖不够甜 GetVirtualCod ...
- vue路由高级用法
五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...
- Alert弹出框处理
selenium的API提供了Alert类对alert弹出框的处理的方法,涉及到的方法有text,dismiss(),accept()和send_keys(),在javascript中主要有alert ...
- python+ selenium&APPium自动化 page Object 设计模式
题记: 之前公司项目比较稳定, 在进行了系统测试,想用自动化测试进行冒烟测试,或者对主要功能进行测试, 因此用到了PO模式 因此做个记录: Page Object Page Object模式是使用Se ...