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路径别名及使用的更多相关文章

  1. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  2. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

  3. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  4. webpack中配置eslint

    首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...

  5. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  6. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  7. webpack 创建vue项目过程中遇到的问题和解决方法

    目录 1 webpack简介 2 webpack实现多个输入输出多个html 3  webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...

  8. VSCode中使用vue项目ESlint验证配置

    如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...

  9. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

随机推荐

  1. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  2. es之零停机重新索引数据

    实际生产,对于文档的操作,偶尔会遇到这种问题: 某一个字段的类型不符合后期的业务了,但是当前的索引已经创建了,我们知道es在字段的mapping建立后就不可再次修改mapping的值 比如: 1): ...

  3. sqli-labs(20)

    0X01 试探一下 这是登录成功的页面 这里题目高速我们是基于cookie的注入 0X01抓包试探 这里登陆的时候有两个包 我们要含有cookie的那个包 0X02试探判断是否cookie存在注入 C ...

  4. [LeetCode]-009-Palindrome_Number

    Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...

  5. Java中String的 "引用" 传递

    1.来看一段有趣但又让人困惑的代码片段 public static void main(String[] args){ String x = new String("ab"); c ...

  6. layui table指定某一行样式

    1.想指定layui table中某一行的样式,找了这个资源可行.转自: https://blog.csdn.net/weixin_44729896/article/details/100524824 ...

  7. DAY 7 上午

    一些图论的题目 BZOJ 3445 Roadblock 求出最短路,枚举每条边再跑一遍即可(科技为了我 代码: #include<bits/stdc++.h> using namespac ...

  8. leetcode 56. Merge Intervals 、57. Insert Interval

    56. Merge Intervals是一个无序的,需要将整体合并:57. Insert Interval是一个本身有序的且已经合并好的,需要将新的插入进这个已经合并好的然后合并成新的. 56. Me ...

  9. 终于, Delphi XE2 携带 GDI+ 库了

    终于, Delphi XE2 携带 GDI+ 库了 使用了较早的 http://www.progdigy.com uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winap ...

  10. 《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记

    Coursera课程<Using Databases with Python> 密歇根大学 Week2 Basic Structured Query Language 15.1 Relat ...