【Vue】引入相对路径的方式和区别

已于 2023-07-22 10:22:55 修改
阅读量273 收藏
点赞数
分类专栏： vue 文章标签： vue.js
于 2023-07-22 10:22:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46368797/article/details/131864611
版权

./ 当前目录
…/ 上一级目录
…/…/表示上上级的目录，以此类推
“/…”表示下级目录

vue 写相对路径图片不显示
前端程序员、项目经理、人工智能博主
10-31 2433
我们一般直接在vue的文件中直接引入路径是不能显示的,如图 原因是因为webpack打包后本地路径丢失，所以我们在data中可以通过require去引入 改正后的代码 在data中定义值并传入路径 欧克欧克，大功告成 ...
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下： 1、打包后的index.html文件 2、打包后的css文件 所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？ 1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。 修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。 但是同时我们也会的发现这样修改后，导
vue踩坑笔记01---导入文件import、路径@和.的区别
qq_43738157的博客
12-28 5989
vue踩坑笔记01---倒入文件import、路径@和.的区别import：.方式：@方式： import： html文件中，通过script标签引入js文件。 而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。 “xxx”指的是为导入的文件起一个名称，不是指倒入的文件的名称，相当于变量名。 “xxx路径”指的是文件的相对路径。 举例说明： 项目目录结...
Vue打包为相对路径
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 1281
对于更复杂的部署需求，可以编写自定义脚本来处理资源路径。通过上述内容，我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径，还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
Vue中 import ...与import{ }、import from ‘@路径‘ 与 import from ‘../路径‘
vv_wisher的博客
04-14 5196
Vue中 import ...与import{ }的区别、import from '@路径' 与 import from '../路径'的区别
Vue里的相对路径
T_ooooo的博客
08-31 936
../ 表示父级目录下 ./ 表示当前目录下 @/ 是webpack/build/webpack.base.conf.js中配置的路径别名 ~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径
Vue 导入文件import、路径@和.的区别
hjh15827475896的博客
10-31 5178
Vue 导入文件import、路径@和.的区别 ***import： html文件中，通过script标签引入js文件。 而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。 “xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 “xxx路径”指的是文件的相对路径. 例如： 在路由index.js中，导入apple.vue和banana.vue import banana from '@/components/banana'
详解Vue.js中引入图片路径的几种方式
10-16
在Vue.js中，正确地引入和使用静态资源，如图片文件，是一个重要的方面，因为这涉及到资源的管理和最终的应用打包。Vue.js 提供了多种方式来处理静态资源，尤其是在模板（template）和样式（CSS）文件中。以下是几种...
vue 解决data中定义图片相对路径页面不显示的问题
10-14
在示例代码中，Vue组件的data()函数定义了两个图片路径，它们都是相对路径： ```javascript data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/...
vue和webpack打包项目相对路径修改的方法
08-27
这时，项目中的相对路径可能会出现问题，导致静态资源如图片、CSS等无法正常加载。本文将详细介绍如何修改Vue和Webpack配置，以便适应这种场景。 首先，我们需要理解Webpack的`publicPath`属性。这个属性指定了输出...
vue引入静态js文件的方法
10-15
引入`config.js`的方式与Vue CLI 2.0类似，只需将`<script>`标签中的路径改为相对`public`目录的路径： ```html <!-- index.html --> <script src="config.js" type="text/javascript"></script> ``` 值得注意的是...
Vue 自定义标签的src属性不能使用相对路径的解决
10-16
主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue @ ~ 相对路径 路径别名设置
a57521的博客
03-29 6662
vue @ ~ 相对路径 路径别名设置 ./这是相对路径的意思，同级目录。 ../上级目录。 @/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么 在build/webpack.base.conf里找到如下 resolve: { extensions: ['.js', '.vue', '.json'],//取消后缀 引入...
前端 -- 基础 路径 -- 相对路径 详解
三毛与海子的博客
01-02 1433
相对路径（ 同一级路径，下一级路径，上一级路径 ）
vue-cli相对路径问题
lirunhui6的博客
11-11 1277
index.vue文件中 "./a.jpg"  index.vue目录下的文件 "../a.jpg"  index.vue上级目录下的文件 "../../a.jpg"  index.vue上级的上级的目录下的文件 以此类推
Vue中路径的@/和./ 的区别
qq_41451744的博客
12-16 550
./：表示相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件@/：表示的是相对路径，@ 代表就是 src 目录，遵从的是从前往后找
绝对路径与相对路径
10-29 590
绝对路径：是从盘符开始的路径，形如 C:\windows\system32\cmd.exe 相对路径：是从当前路径开始的路径，假如当前路径为C:\windows 要描述上述路径，只需输入 system32\cmd.exe 实际上，严格的相对路径写法应为 .\system32\cmd.exe 其中，.表示当前路径，在通道情况下可以省略，只有在特殊的情况下不能省略。 假如当前路径为c:
vue项目设置src相对路径为@
seimeii的博客
11-08 1033
第一步 创建vue.config.js文件 第二步 添加代码 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { devServer: {}, chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src'))
在vue中相对路径和绝对路径
10-11
在Vue中，相对路径和绝对路径都可以用来引入文件或资源。相对路径是相对于当前文件的路径，而绝对路径是从根目录开始的完整路径。 相对路径示例： 1. 如果当前文件与要引入的文件在同一目录下，则可以使用相对路径...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值