vue 路径@

news/2024/7/10 3:22:05 标签: vue, webpack

1、@是webpack定义的别名,在js中可以使用,如下:

import util from '@/assets/js/util'

注:import xxxxx是js语法,所以可以使用@别名

2、这个@是在webpack.base.config.js中配置的,如下:

resolve: {
  extensions: ['.js', '.vue', '.json'],
   alias: {
     'vue$': 'vue/dist/胜利ue.esm.js',
     '@': resolve('src'),
   }
 },

上面的@就代表的是src,所以就在src路径下找文件,也可以自己配置

3、如果img的图片路径也想用@的话,需要这么来使用,issue提出的方案,如下(亲测有效):

<img src="~@/assets/img/logo.png" alt="">

http://www.niftyadmin.cn/n/1770325.html

相关文章

vue 父组件中调用子组件的方法

Vue项目中如何在父组件中直接调用子组件的方法&#xff1a; 方案一&#xff1a;通过ref直接调用子组件的方法&#xff1b; //父组件中<template><div><Button click"handleClick">点击调用子组件方法</Button><Child ref"child&qu…

Vue 子组件调用父组件的方法

Vue项目中如何在子组件中直接调用父组件的方法&#xff1a; 方法一&#xff1a; 直接在子组件中通过this.$parent.event来调用父组件中的方法 //父组件 <template><div><child></child></div> </template> <script>import child f…

vue 生成二维码

一、页面中生成二维码方法 ①、首先安装qrcodejs2插件 npm install qrcodejs2 --save注意&#xff1a;安装完成之后可以在main.js中全局配置&#xff0c;也可以在单个页面中去引用 ②、引入 1&#xff09;单页面中引入 import QRCode from qrcodejs2;2&#xff09;全局配置…

elementUI中 form表单自定义验证方法

一、在form表单中经常去验证一些内容&#xff0c;有的是只比较简单的一些提示&#xff0c;有的则是需要自定义&#xff0c;实现方法如下&#xff1a; <template> <el-form :model"ruleForm2" :rules"dataRule" ref"dataForm" keyup.en…

elementUi 按钮点击之后取消状态

elementUi 中的按钮&#xff0c;点击操作之后按钮的状态会一直存在&#xff0c;如果想要取消的话就手动触发一下&#xff0c;如下&#xff1a; let target evt.target; if(target.nodeName "SPAN"){target evt.target.parentNode;}target.blur();点击的时候去执行…

ElementUI Message提醒框点击多次只显示一个

点击按钮message提示&#xff0c;点击多次就会出现多个&#xff0c;这个时候需要手动去关闭一下message所有的实例&#xff0c;如下&#xff1a; this.$message.closeAll(); //手动关闭所有实例 this.$message({message: 您还没有选中哦~,type: warning });

vue 项目build后背景图路径不对的问题

1、用css写背景图样式是以相对路径来写的 .details-share{position: fixed;top: 0;left: 0;width: 100%;height: 114px;background: url("../assets/images/share.png");background-size: 100%; }当使用npm run dev命令本地访问的时候&#xff0c;背景图片是正常显示…

uni-app 封装uni.request

1、首先建立一个文件夹&#xff0c;然后新建一个api.js&#xff0c;js中这样来定义&#xff0c;如下&#xff1a; //const baseUrl http://XXXX.com const request (url , date {}, type GET, header { }) > {return new Promise((resolve, reject) > {uni.req…