Vue中目录的别名，如src目录的@别名

最新推荐文章于 2024-04-23 10:32:35 发布
最新推荐文章于 2024-04-23 10:32:35 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Vue 个人笔记，不喜勿喷！！ 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29948297/article/details/111715488
版权

如下,给src/assets/styles目录起了一个叫styles的别名
在这里插入图片描述

在样式中引入其他样式需要使用@import引入，
如果在样式中想使用别名， 如src目录的别名@，需要加 ~(其他地方引用是不需要加的， 如main.js文件中引用别名)
如: @import ‘~@/assets/styles/varibles.styl’
或者使用以上定义的styles别名，
如: @import ‘~styles.varibles.styl’
在这里插入图片描述
在这里插入图片描述

战南城
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中怎么配置在src文件下@别名
shi15926lei的博客
11-26 2365
vue中怎么配置在src文件下@别名,详细方法
vue项目，webpack中配置src路径别名及使用
YUSIR 完美CODING世界
04-21 6528
默认会有‘@’别名，指向src目录，还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况：在js中用，在css中用，在html文档内用 js中用，最简单: import {getName} from '@/util/name' css中使用，需要加入“~”，并且不要写成字符串： { background: url(~@/assets/img/04_2.jpg); bac...
SRC知识分享【干货满满】
小司机的奥拓
04-23 2374
SRC（SecurityResponseCenter）安全应急响应中心，是企业用于对外接收来自用户/白帽发现并报告相关安全产品安全缺陷的站点，换句话说就是连接白帽子和企业的平台。同时也可以看成一个”资源置换平台“，白帽用自己的技术合法的向企业提交漏洞，企业给予相应的赏金。相对于企业组织内部技术人员进行渗透测试，SRC更像是发起一场“人民的战争”。目前国内有两种漏洞平台，一种是缺陷报告平台，另一种就是xSRC平台。缺陷报告平台：又称漏洞报告平台，是指由独立的第三方公司或机构成立综合性的“安全应急响应中心”。国
给src配置别名
qq_48306453的博客
04-27 337
给src配置别名 jsconfig.json配置别名@提示： @代表的是src文件夹，这样将来文件过多，找的时候方便很多 注意：modules和dist文件夹中无法使用 使用方法： @/ ：表示src目录 jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*"
src 别名的配置
qq_34752068的博客
06-02 185
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给 src 文件夹配置一个别名！
src文件夹简写方式，配置别名
m0_64351096的博客
09-22 152
src文件夹简写方式，配置别名
Vue中使用webpack别名的方法实例详解
08-27
webpack别名是指在webpack配置文件中定义的一种路径别名，例如alias: { '@': resolve('src'), 'common': resolve('src/common'), 'components': resolve('src/components')}。 知识点2：webpack别名在JS中的应用 ...
vue.config.js中配置Vue的路径别名的方法
10-15
在Vue.js开发中，路径别名是一个非常实用的功能，它允许开发者为项目中的常用路径创建简短的别名，从而提高代码的可读性和可维护性。Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置...
解决vuecli3中img src 的引入问题
10-15
在Vue CLI 3中，处理`img src`的引入问题主要涉及到项目中静态资源的管理。Vue CLI 3改变了之前的目录结构，导致一些在Vue CLI 2中可行的引用方式可能不再适用。以下是对这个问题的详细解答： 1. **在模板中直接...
Vue CL3 配置路径别名详解
10-16
在这个例子中，我们创建了四个别名：`@`、`assets`、`components` 和 `layout`，分别对应于 `src`、`src/assets`、`src/components` 和 `src/layout` 目录。这样，当我们需要导入这些目录下的文件时，可以使用这些...
【vue2.0-初始化配置】
weixin_47416539的博客
04-05 1444
vue2.0-初始化配置 创建项目：vue create demo 1.eslint校验关闭 例如：声明变量没有就会报错 //在根目录下创建一个vue.config.js文件 module.exports = { lintOnSave:false//关闭eslint } 2.src文件夹简写方法，配置别名。@-@代表src文件 //在根目录下创建jsconfig.json文件 { "compilerOptions":{ "baseUrl":"./", "
Vue项目设置路径src目录别名为@
jonssonyan
01-24 5644
在实际项目中，我们通常可以将src目录设置为@目录，这样引入文件时候可以一目了然而且使用起来非常方便，可以提高我们的开发效率。 本文介绍如何在实际项目中使用@作为src目录的别名， 如果你使用的编程语言为JavaScript 如果你使用的编程语言为TypeScript ...
Vue项目路径别名设置
m0_37828249的博客
06-23 8470
用vue-cli搭建好vue项目之后，进入正式开发过程，有时候会发现各种import路径中都存在长串的重复路径，比如：import 'src/assets/styles/reset.css' import 'src/assets/styles/border.css'为了方便维护，可以打开build文件下的webpack.base.conf.js文件，在module.exports中找到resolv...
vue img动态src加载@别名图片失败问题
likuntao123的博客
01-02 2371
vue img动态src加载@别名图片失败问题 问题的由来： url-loader会把非根路径的url解析为相对路径 加载@别名的动态src 使用require引入图片（ps：require后面只能是字符串而不能是变量） ...
【vue】vue中设置路径别名
Meditation_Crazy
07-01 5482
前言 转载：https://blog.csdn.net/panchang199266/article/details/90145638 在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。 实现步骤 新建 vue.config.js 文件，和package.json同层级 const path = require('path'); function resolve.
Vue中快捷路径的设置（src的别名）
m0_65262198的博客
04-07 1060
我们在vue在组件中以及js文件中经常会应用src目录下的一些文件或者资源，最常见的办法就是一层一层的../../去转出文件夹寻找所需资源所在的路径。 可以通过设置一个标识来代表src目录 之后需要到src目录下应用资源书写路径可以直接通过标识/来查询 下列就是设置代码： 我们首先新建一个文件根目录下新建一个文件jsconfig.json 在内写以下代码： { "compilerOptions": { "baseUrl": "./", "paths": { "@..
src文件夹简写方法，配置别名。jsconfig.json配置别名@提示
qq_42529941的博客
12-06 942
{//jsconfig.json配置别名@提示 //【@代表的是src文件夹，这样将来文件过多，找的时候方便很多】 "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, //不能在node_modules、dist文件夹使用 "exclude": ["node_modules", "dist"] } ...
vue项目使用ts识别别名@
qq_40026668的博客
05-14 1495
在tsconfig.json文件中加入 "paths": { "baseUrl": ".", "@/*": ["src/*"] } 完整配置 //vite.config.ts resolve: { alias: { '@': resolve('src'), '*': resolve(''), }, }, //tsconfig.json { "compilerOptions": {
vue3+vite配置路径别名@
最新发布
05-07
在 Vue3 和 Vite 中，可以通过配置路径别名来简化模块导入的路径。配置路径别名的方式如下： 1. 在项目根目录下创建 `vite.config.js` 文件（如果没有的话）。 2. 在 `vite.config.js` 文件中添加以下代码： ``` const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }; ``` 上述代码中，我们定义了一个 `@` 路径别名，指向项目的 `src` 目录。 3. 在项目中使用路径别名： 在项目中使用路径别名时，只需要在导入模块时使用别名即可。例如： ``` import HelloWorld from '@/components/HelloWorld.vue'; ``` 这里使用了 `@` 别名，它指向了项目的 `src` 目录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值