Vue中路径的`@/`和`./`有何区别

最新推荐文章于 2024-10-10 00:20:44 发布

郭宝

最新推荐文章于 2024-10-10 00:20:44 发布

阅读量2.7k

点赞数 2

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/85232899

版权

Web前端专栏收录该内容

281 篇文章 106 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

Vue项目中，`./`代表当前目录下的同级路径，而`@/`通常代表根据webpack配置，如在`webpack.base.conf.js`中设定的src目录，如'@/components/login'指src/components/login文件。

摘要由CSDN通过智能技术生成

`./` 的意思：

表示的是相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件,

`@/` 的意思：

表示的是相对路径，具体代表什么路径要看项目根目录/build/webpack.base.conf.js 文件中@是如何配置的，比如我的配置文件中@就代表src目录，遵从的是从前往后找，比如'@/components/login' 就表示的是src/components/login文件

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郭宝

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

vue中的@代表什么

Ziuc的博客

05-28

2576

默认情况下，默认情况下，在Webpack中定义了一个别名（alias）：@ @/components 等价于 src/components 对应的文件夹是 src 文件夹，是通过path.resolve()实现的： configureWebpack: { resolve: { alias: { '@': resolve('src') } } } ...

Vue中的路径@/和./有什么区别

努力向前，成长可见

12-20

1303

Vue中的路径@/和./有什么区别 ./表示相对路径，具体代表当前目录下的同级目录，遵循从后往前找文件 @/的意思：表示的也是相对路径，@在根目录/build/webpack.base.conf.js文件中是经过配置的，比如配置文件中@配置成src目录，遵循从前往后找文件，比如’@/components/login’ 就表示的是src/components/login文件配置代码如下： resolve: { extensions: ['.js', '.vue', '.json'],

参与评论您还未登录，请先登录后发表或查看评论

Vue 中的符号用法详解

最新发布

m0_57836225的博客

10-10

766

在 Vue 中，引号用于定义字符串。可以使用单引号或双引号来包裹字符串值。在数据属性、方法参数和模板中的文本内容中，我们经常需要使用字符串。例如：data() {return {},methods: {在模板中，可以使用引号来显示静态文本或作为属性的值。例如：<template><div></div>

@和./的区别

qq_40109570的博客

12-02

1391

@和./的区别 ./表示相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件 @/的意思：表示的是相对路径(当然这也是简写啦)，因为这个在根目录/build/webpack.base.conf.js文件中@是配置的，比如我的配置文件中@就代表src目录，遵从的是从前往后找，比如’@/components/login’ 就表示的是src/components/login文件 /bu...

在Vue项目导入路径中@符号是什么意思?

Meta.Qing的博客

08-28

1181

我开始了一个新的vue.js项目，所以我使用vue-cli工具脚手架出一个新的webpack项目(即vue init webpack)。这是通过Webpack解析完成的。

vue中@符号表示什么意思？

sanmi8276的博客

07-01

5514

这和vue没关系。 ./这是相对路径的意思。@/这是webpack设置的路径别名。这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。 resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' } }, 就是说@这东西代表着到src这个文件夹的路径 ...

./和@/的区别

qq_39321234的博客

05-20

1721

因此，“@/store”和“./store”之间的区别在于它们指向的目录位置。如果你的store目录位于应用程序的根目录下，则使用“@/store”更方便。如果你的store目录相对于当前文件位于不同的目录中，则使用“./store”更方便。“./store”指的是相对于当前文件的“store”目录。这意味着如果你有一个位于当前目录下的“store”目录，那么“./store”将指向该目录。“@/store”指的是应用程序中的“src/store”目录。

vue项目中 jsconfig.json是什么

segegefe的博客

07-31

659

目录中存在tsconfig.json文件表明该目录是TypeScript项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。JavaScript项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些与JavaScript相关的编译器标志。以上就是今天总结jsconfig.json的内容，本文仅仅简单介绍了jsconfig.json的一些基本配置，而jsconfig.json提供了大量能使我们快速便捷提高代码效率的方法。...

Vue.js面试题.pdf

05-01

Vue.js中的过渡效果（Transition）和动画（Animation）有何区别？请进行简要比较。 **过渡效果(Transition)** 更多关注的是元素进入或离开时的效果，通常与CSS配合使用。 **动画(Animation)** 则更加复杂，可能...

vue去掉路径#nginx相关配置问题，白屏问题，意外的惊喜

m0_60388261的博客

04-18

342

【代码】vue去掉路径#nginx相关配置问题，白屏问题，意外的惊喜。

响应式企业官方网站模板，使用vue全家桶开发

07-13

响应式企业官方网站模板是现代网页设计中的一个重要概念，它旨在为用户提供一致且优化的体验，无论他们使用何种设备访问网站，如桌面电脑、平板电脑或移动设备。Vue.js 是一个流行的前端JavaScript框架，用于构建...

《Vue入门到精通系列之三》--- webpack详解

2301_82244343的博客

04-20

1211

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？

vue-ssr在项目中的实践

java06051515的博客

12-04

1678

写在文前由于前端脚手架、打包工具、Node等版本的多样性，本文无法同时兼顾，文中所述皆基于以下技术栈进行。脚手架：vue-cli3 打包工具：webpack4，集成在vue-cli3中，通过修改vue.config.js的方式进行配置 Node框架：koa2 简介服务器端渲染，即采用“同构”的策略，在服务器端对一部分前端代码进行渲染，减少浏览器对页面的渲染量。通常服务器端渲染的优点和...

Vue里的相对路径

T_ooooo的博客

08-31

941

../ 表示父级目录下 ./ 表示当前目录下 @/ 是webpack/build/webpack.base.conf.js中配置的路径别名 ~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

Jioho的博客

09-27

9016

webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？准备环境 nginx 模拟一个真实的 URL 和高仿真项目

vue中的@符号的是什么意思

Sunraiseprice的博客

11-10

2873

@指的是当前项目的根路径

Vue常见简写 “:“ , “@“ , “#“

xwnxwn的专栏

04-07

2852

首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.label: "日期",

vue-cli3 资源路径publicPath配置成 ./ 和 / 的天大区别，net::ERR_ABORTED 404 (Not Found)，导致线上项目的部分路由懒加载跳转出现资源不存在的错误

weixin_42120767的博客

11-01

1300

如图 vue.config.js里的publicPath配置成./和/有什么区别呢?以我实际项目中遇到的问题来说明。我项目中遇到的问题是： 1.线上项目部分路由跳转的时候控制台报错，出现资源加载错误net::ERR_ABORTED 404 (Not Found)，还有Loading chunk xxxx filed,请看清楚，这是部分页面，并不是全部！ 2.上面的问题只有在部署到线上的时候才有，本地开发环境没有。 3.如果路由采用直接引入，不用路由懒加载，既...

this.$router.push 和 this.$router.replace 有何区别？

07-26

`this.$router.push` 和 `this.$router.replace` 都是 Vue Router 提供的方法用于导航到新页面。它们之间的主要区别在于 URL 变更的历史记录处理以及浏览器的前进/后退按钮行为： ### `this.$router.push` 当使用 `this.$router.push` 导航时： 1. **URL 变更历史**：它会将当前路由添加到浏览器的 URL 变更历史列表中。这意味着用户可以使用浏览器的前进/后退按钮返回上一步。 2. **URL 更新**：这会导致浏览器地址栏显示新的路径，并可能触发一些服务端请求如刷新数据、加载特定内容等。 ### `this.$router.replace` 而使用 `this.$router.replace` 导航时： 1. **URL 变更历史**：它不会将当前路由添加到 URL 变更历史中。因此，浏览器的前进/后退按钮将忽略这次导航并保持在之前的页面。 2. **URL 更新**：同样地，这也会更新 URL 并可能导致服务端请求。但是，由于没有添加到历史堆栈中，这个操作对于用户来说几乎是不可见的，因为它不会留下 URL 变更的历史痕迹。 ### 应用场景示例 #### 使用 `this.$router.push` 当你希望用户可以使用浏览器的历史功能（比如点击前进或后退）时，你应该使用 `this.$router.push`。例如，在用户完成某些操作后需要导航到另一个页面并且想要保留返回选项时： ```javascript this.$router.push({ name: 'Profile', params: { userId: userId } }); ``` #### 使用 `this.$router.replace` 如果你只是想简单地刷新视图或切换组件而不影响用户的浏览历史，你可以使用 `this.$router.replace`。这常用于内部导航，尤其是当你不关心是否允许用户通过浏览器的历史回到当前页面： ```javascript this.$router.replace({ path: '/dashboard', query: { filter: 'newest' } }); ``` ###