Vue-cli 创建项目关于资源路径问题

最新推荐文章于 2024-08-24 17:37:33 发布
最新推荐文章于 2024-08-24 17:37:33 发布
阅读量4k 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1170375057/article/details/79036694
版权
本文探讨了在Vue项目中遇到的资源路径问题，包括图片引入的绝对路径与打包后的绝对路径问题。通过调整webpack配置，可以实现别名引用资源和打包时转换为相对路径，简化部署步骤。作者分享了具体配置方法，并鼓励读者提出意见和交流。
摘要由CSDN通过智能技术生成

关于在vue项目中资源路径问题

在写vue项目时往往面临这些问题
1. 图片引入使用绝对路径，不会经过编译，小图片不会编译成base64形式
2. 打包之后的文件，全部使用绝对路径，部署时带来大量路径问题
其实这些问题都可以通过对webpack的配置文件进行更改来解决

资源路径

在引入资源时使用，别名alias，vue init webpack生成的项目在build/webpack.base.conf.js文件中进行更改

alias: {
  'vue$': 'vue/dist/vue.esm.js', // 默认的
  '@': resolve('src'),  // 默认的，可自定义
}

之后再项目中就可以使用了
<img src="@/assets/images/[图片名]"> // images: src/assets 下存放图片的文件夹

最低0.47元/天 解锁文章
男孩依旧
关注
专栏目录
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias ...
vue实战项目资源.zip
07-10
vue实战项目所需全部资源
VueCli3 @路径设置
weixin_43899943的博客
12-18 2641
1.最外层目录创建文件vue.config.js 2.加入如下代码 let path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) } } ...
React18学习笔记（三）——redux状态管理工具
最新发布
weixin_56370772的博客
08-24 1245
组件中使用哪个hook函数获取store中的数据？组件中使用哪个hook函数获取dispatch方法？如何得到要提交action对象？执行store模块中导出的actionCreater方法4. Redux与React - 提交action传参4.1 需求说明组件中有俩个按钮 `add to 10` 和 `add to 20` 可以直接把 count 值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数4.2 提交action传参实现需求。
多套vue项目资源
03-02
多套vue项目资源，使用需要npm install,根据自己的需求进行修改开发
一个VUE项目
11-14
方便别人下载。这个是一个VUE小项目。 顺便看一看学一学
VUE相关开源项目
01-04
Vue相关开源项目库汇总
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
5. 在开发Vue-cli项目时，需要注意css文件的路径问题，正确地配置css文件的路径可以避免许多报错的问题。 结语 本文详细介绍了Vue-cli项目中引入css报错的问题原因分析和解决方法。希望这个解决方法能够帮助大家在...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
使用Vue CLI2创建项目，可以通过`vue-cli2 init webpack`来创建一个使用webpack模板的新项目；而使用Vue CLI3，可以使用`vue-cli3 create my-project`来创建项目，其中`my-project`是你想要的项目名称。 以上就是...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中，静态资源如果放在了固定的位置，无论是使用相对路径还是绝对路径，都不会出现404错误，因为Webpack在构建过程中会将这些静态资源复制到构建目录。 然而，动态图片路径问题的出现，主要是因为...
vue完整项目.zip
06-25
vue完整项目，实现即可上岗web前端。这个是已经实现的，极个别编辑和删除功能太简单没有写，里面有接口文档和项目步骤。大概完成后的页面情况我也在博客里展示了，连接如下https://blog.csdn.net/qq_41792374/article/details/106955026
vue 项目实战
06-17
这是一个入门vue的实战项目，可以提升自己对vue的掌握。
Vue项目 三、资源准备以及项目分解
旅行的风筝
09-28 450
项目分解成多少个模块，哪些模块是需要复用的。
如何在vue项目中配置引用路径“@”
热门推荐
m0_60692814的博客
09-11 1万+
配置引用路径（以@引用为项目的src目录为例）可拆分为如下两步操作 配置webpack打包时将@解析为项目的src目录 配置vsCode在路径中输入@时的路径提示 本贴着重讲解“配置webpack打包时将@解析为项目的src目录”的操作和溯源 操作 在项目根目录的vue.config.js文件中做如下配置 const path = require('path') module.exports = { configureWebpack: { resolve: {
vue-cli 项目修改@的默认路径
qq_57558631的博客
05-23 1041
vue-cli项目默认为src目录提供了别名@ 可按如下方式修改默认的路径 // vue.config.js const path = require('path') module.exports = { chainWebpack: config => { config.resolve.alias .set('@', path.resolve(__dirname, 'path/to/desination')); } } 或者自定义更多路径 ...
Vue超全资源，收藏！
LuckyWinty的博客
09-08 338
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群这些资源涉及有关VueJS的组件库，示例， 项目，工具和文章。UI库和框架UI组件库是一组（通常）可靠的现成UI组件，如按钮、输入、对话框等。它们用作布局的构建基块。由于其模块化特性，我们可以以许多不同的方式排列组件，以实现独特的效果。BootstrapVueBootstrap vue将Bootstrap组件与Vue结合使用。它...
解决vue ui报错Cannot find module ‘@vue/cli/lib/util/rcPath‘
weixin_42557255的博客
01-19 2027
使用 npm update -g @vue/cli 下载完成之后 使用图形界面创建脚手架 vue ui 报错Cannot find module ‘@vue/cli/lib/util/rcPath’ 解决 : 找到全局安装位置 可以找到两个@vue,发现第二次@vue没有rcPath.js 在第二个@vue中创建一个cli文件夹,吧第一个@vue的lib放进去即可 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值