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. 基于数组阻塞队列 ArrayBlockingQueue 的一个队列工具类

    java语言基于ArrayBlockingQueue 开发的一个根据特定前缀和后缀的队列.每天自动循环生成. 1.定义队列基类 Cookie package com.bytter.util.queue ...

  2. sqli--labs(25)

    过滤了 or and 的get注入 0X01测试阶段 ’报错 ” 不报错 那么就是'闭合 好的我们知道闭合后来#闭合后面 ?id= 语法不正确 发现过滤了 or and 那么我们继续构造 ?id= 0 ...

  3. springboot 基于@Scheduled注解 实现定时任务

    前言 使用SpringBoot创建定时任务非常简单,目前主要有以下三种创建方式: 一.基于注解(@Scheduled) 二.基于接口(SchedulingConfigurer) 前者相信大家都很熟悉, ...

  4. HDU6623 思维题(n分解成质因子的形式,问最小的幂是多少)

    题目大意:给你一个数n,把它分解为素数的幂次的乘积的形式:n=p1^e1 * p2^e2 * .......pk^ek  求最小的幂次是多少 n=le18 分析: 首先我们肯定是不可以枚举1e18的因 ...

  5. java应用cpu使用率过高问题排查

    ---------------------------------------linux下如何定位代码问题------------------------------- 1.先通过top命令找到消耗c ...

  6. MYSQL,分别用一条语句交换两列的值与两行的值

    测试表: CREATE TABLE `test` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, ` DEFAULT CHARSET=utf8 ...

  7. [python] Pythonic语法笔记

    Pythonic语法笔记 __new__ 在类实例化之前执行的,也就是在init之前执行,可以为这个类写操作.接受的参数不是self而是cls.只有在new方法里返回类才会执行init操作,需要返回父 ...

  8. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_1 今日课程内容介绍

  9. 阶段3 1.Mybatis_05.使用Mybatis完成CRUD_6 Mybatis的CRUD-保存操作的细节-获取保存数据的id

    保存后得到id 默认查询出来的是0,因为没有插入就要得到最后的id值. insert语句跟在前面就可以获取到id了 新插入的这条数据就是51 order=after表示在insert语句后再去获取id ...

  10. C++/C# 转化 Marshal VS Ptr

    Vidyo32.VidyoClientInEventLogin Login = new Vidyo32.VidyoClientInEventLogin(); Login.portalUri = thi ...