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. box-shadow inset

    安卓支持,ios不支持:box-shadow: 0px 0px 2px inset rgba(0,0,0,0.08); 安卓,ios都支持:box-shadow: inset 0px 0px 2px ...

  2. i++ 是线程安全的吗

    相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...

  3. 15 可视化工具 Navicat的简单使用

    本节重点: 掌握Navicat的基本使用 # PS:在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作My ...

  4. React Native商城项目实战04 - 封装TabNavigator.Item的创建

    1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...

  5. Python的复制,浅拷贝和深拷贝

    https://www.cnblogs.com/xueli/p/4952063.html 如果给一个变量赋值一个对象,那么新变量和原对象变量将会是同一个引用,其中一方改变,另一方也会改变. 该问题可以 ...

  6. Sqlserver 创建账号

    下面是通过脚本创建账号,创建一个appuser 的账号,密码:123456,可操作的DB:TEST 赋予权限,增删改查,操作视图,存储过程.当然当前的账号要有足够的权限. create login a ...

  7. Windows Server系统定时任务备份ORACLE数据库

    Windows Server系统定时任务备份ORACLE数据库 一.编辑备份脚本 RMAN备份数据库 1.在备份脚本目录下,创建bat文件db_rman.bat set ORACLE_SID=orcl ...

  8. EMQ插件通过HTTP连接认证服务器实现认证

    需求 在EMQ中添加认证插件,将到来的MQTT连接的ClientID.UserName.Password通过HTTP协议发送到认证服务器,用返回的数据决定是否允许该连接: 在连接时和断开时向服务器发送 ...

  9. multiple datasource config

    Hi Harshit S. project structure: multiple datasource config as follows: step 1: step 2:add a datasou ...

  10. c语言字串指针 char*

    c语言中 char* 不仅能存字符串,还能存二进制数据,所以它的用途因使用者而定. char* 在很多使用场景下,是需要存储ascii码为0的元素的,这样就必须注意一个问题,那就是char*的长度. ...