vue-cli 配置资源引用的绝对路径

最新推荐文章于 2024-07-15 16:56:02 发布
最新推荐文章于 2024-07-15 16:56:02 发布
阅读量9.3k 收藏 4
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nalaluky/article/details/86590237
版权

1、在vue项目中，我们经常需要引用图片等资源，每次用相对路径来说太麻烦

2、于是将要解决在vue-cli下搭建的项目配置绝对路径的位置

配置如下：

在项目中的build文件夹下的webpack.base.conf.js中进行配置(配置详情如上图)

在项目中使用配置好的绝对路径如下：

使用~加上你配置的绝对路径的路径名就可以在项目中使用了

如上我配置的绝对路径名：F:/travel-vue-h5/src/assets/mages/紫霞.jpg

我配置的路径如下： 

'assets': resolve('src/assets/')

该路径的绝对路径名我就叫做assets

使用的时候直接

 <img src="~assets/images/紫霞.jpg" alt="">

解决！！！！

linefate
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue引用本地静态资源（图片、音频、视频）
只如初见0706的博客
03-02 6297
说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用 1、第一种引用方式：直接在<template>中引用，src中使用相对地址 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> &lt...
Vue-cli 创建项目关于资源路径问题
男孩依旧
01-11 4082
关于在vue项目中资源路径问题 在写vue项目时往往面临这些问题 1. 图片引入使用绝对路径，不会经过编译，小图片不会编译成base64形式 2. 打包之后的文件，全部使用绝对路径，部署时带来大量路径问题 其实这些问题都可以通过对webpack的配置文件进行更改来解决 资源路径 在引入资源时使用，别名alias，vue init webpack生成的项目在bui
@vue/cli 3 打包文件读取绝对路径处理
dbghum0371的博客
11-13 447
@vue/cli 3 封装了 webpack.config.js，一般都在 vue.config.js 里面配置，官网不推荐在 webpack 的 output 处理，这里踩了一下坑，希望可以帮到后面遇到的小伙伴。 vue.config.js module.exports = { // 这里是配置上线读取当前目录，默认是根路径，如 /js, /css 等，具体根据项目来 base...
vue.config.js配置笔记
最新发布
m0_48738983的博客
07-15 178
path模块是node.jsd的核心模块之一，提供了用于处理文件路径的实用工具。是 Node.js 中的一个全局变量，表示当前执行脚本所在的目录的绝对路径。，我们得到了一个绝对路径，这个路径是从当前脚本所在目录开始的完整路径。函数来定义一些常用的路径别名，在项目中以更简洁的方式引用这些路径。
Vue3引入组件时相对路径改变为绝对路径引入
m0_75192581的博客
09-06 570
接下来我们看一张图片我们看到以上两种引入方式，如果我们组件发生移动，那么我们的相对路径是不是就不能用了？所以我们采用绝对路径的方式。
vue3+ts+vite中配置“@“绝对路径
学而不思则罔
07-19 2172
【代码】vue3+ts+vite中配置"@"绝对路径。
Vue cli build 打包时指定路径
言小溪 的博客
11-07 5321
找到 config/index.js 路径的文件 找到 build 属性 更改成指定路径，相对路径和绝对路径都行，例如下面 // Template for NoFound.html index: path.resolve(__dirname, 'E:/IDEA/Project/blog/src/main/resources/static/index.html'), // Paths assetsRoot: path.resolve(__dirname, 'E:/IDEA/
Vue-cli配置打包文件本地使用的教程图解
10-18
从给定的文件内容中，我们可以抽取出关于Vue-cli配置打包文件本地使用的具体步骤和相关知识点。 知识点1：Vue-cli的基本介绍 Vue-cli是一个基于Vue.js进行快速开发的完整系统，它提供了一个官方的脚手架工具来帮助...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
总结以上知识点，当你在Vue CLI 3项目中遇到public文件夹静态资源报错的问题时，应该首先检查你的资源引用路径是否正确。根据你的项目部署路径，设置合适的`process.env.BASE_URL`环境变量，然后通过`vue.config.js`...
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
08-27
在编写 Vue 组件时，需要使用相对 URL 或绝对 URL 来引用静态资源。相对 URL 是指相对于当前组件的 URL，例如 `./assets/logo.png`。绝对 URL 是指从项目根目录开始的 URL，例如 `/static/logo.png`。在使用相对 URL...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
首先，需要了解在Vue-cli3项目中，Vue的单文件组件（Single File Components，简称SFC）中的静态资源引用方式。在开发过程中，我们通常会用到两种路径：相对路径和绝对路径。相对路径是指定资源相对于当前文件的位置...
彻底搞懂并解决vue-cli4中图片显示的问题实现
10-14
在vue-cli4项目中，服务器根目录是`public`文件夹，因此，使用绝对路径时，图片资源必须放在`public`文件夹下。 ```html <!-- template --> ``` 使用绝对路径是最简单直接的方法，因为webpack不会介入处理，图片...
vue-cli 4.0版本项目打包之绝对路劲
qq_41212752的博客
08-31 556
vue-cli 4.0版本打包 绝对路劲 在vue项目的根目录 下找到一个 vue.config.js文件。 在文件中修改如下代码： 　　module.exports={ 　　　　publicPath:’./’, 　　　　outputDir:‘dist’, 　　　　assetsDir:‘static’ 　　} 然后找到 router 目录下的 index.js 文件。修改 mode的值为hash代码： 　　mode:‘hash’ 然后重新启动npm run build ...
vue-cli 配置路径 及 @,~,~@的使用
HHH917的博客
10-28 3782
1.vue-cli2自定义 vue-cli2需要在build的webpack.base.conf.js内设置 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '#': resolve('src/assets') } } 2.vue-cli3需要在build的webpac
关于vue-cli文件引入路径
Stark6的博客
09-03 1184
使用vuecli完成项目的时候，经常会引入各种文件。而每次引入的时候使用相对路径的话，是非常麻烦的。如果使用vue-cli的话，可以用~@来代表src文件，之后通过绝对路径来引用文件。 vue-cli默认配置alias，将@配置为src文件，可以在\node_modules\@vue\cli-service\lib\config\base.js这个文件里看到源码 .alias ...
vue配置多环境请求路径【vue-cli】
qq_22841387的博客
10-18 1072
当我们系统趋于完善时，任何修改都不能直接部署到线上，而是需要先部署在测试服务器后，测试完成后，部署至线上服务器，也就是说，当前项目涉及到三个环境。因为我们项目中已经对axios进行二次封装了，因此直接使用了。这里请求的接口名字可以自行定义，这里我直接使用了。在翻看官方文档时，我们发现了我们需要用到的命令。的文件形式对不同的mode进行区分。默认情况下，三个文件必须有以下内容。在项目的根目录处，创建三个文件。后续使用时，使用你定义的即可。以下方法基于vue-cli。
vue-cli起步配置
m0_61886817的博客
03-03 431
1.打开终端cmd，输入以下命令安装vue-cli npm install -g @vue-cli 2. 安装完成后，输入 vue -V查看安装是否成功 3.创建vue项目，打开需要创建的文件位置，打开终端 vue create demo-first 4.创建过程中会弹出以下提示， 问你是否使用更快的淘宝镜像，我选择 No. 5.使用 Vue create 创建项目是使用默认配置（包含babel, eslint）还是手动选择，我选择手动选择。 6.如果不选则默认来看看手动选择.
【VUE】播放本地语音/音频
weixin_38792911的博客
11-30 3706
音频文件存在assets文件夹下，为mp3格式 <audio ref="audioTip" style="display:none;" > <source :src="audio.src"> </audio> data() { return { audio:{ //消息通知 src:require("../../assets/common/audio/wx.mp3"), } }; } //播
vue 引入本地音频文件
woyaoshengzhang的博客
04-03 5230
在需要引入音频的vue文件中使用 require 的方式引入，指定使用 file-loade 示例如下const sounds = require("file-loader!../assets/sounds/sounds.mp3");
vue-cli-service 怎么配置
03-28
vue-cli-service 是 Vue CLI 提供的一个命令行工具，用于在开发和构建 Vue.js 项目时进行配置和管理。它提供了一系列的命令，可以帮助我们进行开发、构建、测试和部署等操作。 要配置 vue-cli-service，可以通过在项目根目录下的 vue.config.js 文件中进行配置。这个文件是一个可选的配置文件，如果不存在，Vue CLI 会使用默认的配置。 下面是一些常见的 vue-cli-service 的配置选项： 1. publicPath：指定项目的公共路径，用于部署时的资源引用。可以是相对路径或绝对路径。 2. outputDir：指定构建输出的目录，默认为 "dist"。 3. assetsDir：指定静态资源（如图片、字体等）的输出目录，默认为 "static"。 4. devServer：用于配置开发服务器的选项，如端口号、代理等。 5. productionSourceMap：是否生成生产环境的 source map，默认为 true。 6. css：用于配置 CSS 相关的选项，如是否启用 CSS modules、是否提取 CSS 等。 除了以上选项，还可以根据具体需求进行更多的配置，如插件配置、babel 配置等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值