vue-cli 3.0 给src和assets设置别名，在项目html和css里的使用方法

最新推荐文章于 2024-05-05 21:29:47 发布
最新推荐文章于 2024-05-05 21:29:47 发布
阅读量480 收藏 1
点赞数
分类专栏： vue 项目经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versious/article/details/119612171
版权

在vue.config.js里配置了别名
在这里插入图片描述
src用@代替，使用正常。

 <img src="@/assets/images/right_arrow_icon.png" />

想直接用assets的别名时，以为和src写法一样，直接用，发现图片没有引入成功
错误：

<img src=<
最低0.47元/天 解锁文章
versious
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习笔记：关于Vue-Cli3/4 给文件路径起别名的设置及注意事项
AiLengling的博客
09-04 362
前因 在Vue-Cli2中，在build文件夹下，自身带有webpack.base.conf.js，可以在里面修改配置，从而达到给文件路径起别名的效果，而在Vue-Cli3/4中，并没有该文件，那么我们就需要自己去配置了。 上图为Vue-Cli2中webpack.base.conf.js中起别名配置图 一、创建vue.config.js文件 在原始目录下创建vue.config.js文件，即此文件与src文件夹同级 二、在vue.config.js中编写配置代码 const pa...
vue assets html,vue引入assets和static静态资源问题
weixin_29770269的博客
06-29 1913
一、assets文件夹与static文件夹的区别assets文件是src下的，因此最后运行时须要进行打包，通常用来存放本身用到的静态资源；cssstatic文件不须要打包就直接放在最终的文件中了，通常用来存放第三方静态资源。html引入静态资源方法：js中用import，css中用@import url(...) ,index.html中用link(script)标签引入。前端利用vue-cli脚...
vue-cli配置src别名
xx820702的博客
04-13 417
新建文件：jsconfig.json { "compilerOptions": { "baseUrl":"./", "paths":{ "@/*":[ "src/*" ] } }, "exclude":[ "node_modules", "dist" ] }
vue 3.0 快速入门教程
最新发布
zai329979994639的博客
05-05 1831
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
Vue中快捷路径的设置（src的别名）
m0_65262198的博客
04-07 1067
我们在vue在组件中以及js文件中经常会应用src目录下的一些文件或者资源，最常见的办法就是一层一层的../../去转出文件夹寻找所需资源所在的路径。 可以通过设置一个标识来代表src目录 之后需要到src目录下应用资源书写路径可以直接通过标识/来查询 下列就是设置代码： 我们首先新建一个文件根目录下新建一个文件jsconfig.json 在内写以下代码： { "compilerOptions": { "baseUrl": "./", "paths": { "@..
vue3.0--vite配置别名路径
Mozifei73的博客
07-07 1163
这里记录一下关于Vite搭建的Vue3.0项目，别名路径的配置，直接上代码 tsconfig.json 使用方法 关于上面提到的按需引入 vite.config.js 这样，无需引入就可以随意使用Api 例如：
VueCli3中别名的使用以及一些问题的解决方式
weixin_51199249的博客
05-04 997
VueCli3中别名的使用以及一些问题的解决方式 平时使用脚手架写项目时，有时项目目录结构太复杂，在引用一些组件或图片时，会变得很复杂，如图： 由图可见，要想在当前编辑的文件中使用另外文件中存储的图片，如果用相对路径的话，会用到许多…/…/，并且后期如果将项目目录结构变换的话，也会造成许多不便。 解决方式： 在项目中，新建 一个vue.config.js的文件。（注意：此文件是和src同级的！否则会报错找不到路径） 在vue.config.js中的代码： module.exports = { confi
vue中在scss中通过别名@的形式引入图片资源
coucouxie的博客
12-15 943
如何在scss中通过别名引入图片资源 .back { background: url('@/assets/back/1.png') } 上面的写法是错误的，这样会报错 正确的写法应该如下 .back { background: url('~@/assets/back/1.png') } 至于为什么下面的写法才是正确的，好像是和css-loader相关的，后面再去探究。 ...
vue css采用别名引入背景图
slice_93的博客
05-17 753
在vue css中采用别名引入 背景图片，可以在前面加一个波浪号 css 属性中： background: url("~@/assets/xxx.jpg") Webpack 会将以~符号作为前缀的路径视作依赖模块而去解析，这样 @的 alias 配置就能生效了。 ...
vue3+vite 如何修改打包后的文件夹名称
灰太狼-铜豌豆的博客
06-26 5460
vue3+vite 如何修改打包后的文件夹名称
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
热门推荐
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
.vue单文件组件样式中引入scss样式文件——@import ‘~@/assets/styles/mixins‘中~@的含义
youngko的博客
11-10 798
3、没有写后缀名，是因为vue会默认找到目录下的variables.scss文件，不影响使用。2、 波浪号~代表根目录或者表示读取的意思， @ 符号表示src目录。1、样式里引入样式文件，需要用 @import这种开头。
vue webpack打包名称设置
qq_15038747的博客
01-01 2352
第一步： 固定写法 component: import(/* webpackChunkName: "Home" */`@/components/Home`) 第二步： 固定写法： filename: utils.assetsPath('js/[name].js?v=[chunkhash]'), chunkFilename: utils.assetsPath('js/[nam...
vue3想用@/来代表src路径
weixin_53488675的博客
03-13 2348
找到项目中node_modules这一依赖文件夹 查看此文夹下是否有path文件夹，若没有在终端下载一下就有了 npm install path --save 在vue.config.js（若没有就自己新建吧）中输入以下代码来配置 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (co..
VUE-CLI2.0使用过程中注意事项
weixin_43422861的博客
03-27 620
Vue使用过程中注意事项1.图片的引用新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1.图片的引用 标签引用...
vue脚手架配置路径别名
weixin_45805570的博客
03-25 867
vue-cli 项目配置路径别名 vue-cli 2.x配置方式 在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项。 resolve: { extensions: ['.js', '.vue', '.json'], //这个是匹配扩展名的 alias: { '@': resolve('src'), //src解析成@
vue-cli项目中使用别名：“@”和“~”的坑
weixin_42060658的博客
12-22 3416
vue项目中使用别名：“@”和“~”的坑 最经在项目中遇到一个问题就是 在使用 vue-cli 构建工具时遇到的问题就是静态资源引用的问题 了解别名的作用：@和~ 都是在路径访问时使用的 如何设置别名 在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。 resolve: { extensions: ['.js', '.vue', '.json']...
vue-cli3项目搭建配置以及性能优化
weixin_34344403的博客
03-24 538
vue-cli3项目搭建配置以及性能优化 在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着偷懒的本能，自己打算搭建一个基础包以备后期开发应用，并对其进行性能优化和配置。 该项目的GitHub：github.com/bayi-lzp/vu… 求星 master分支为基础包，vi_mint_ui分支为优化后项目，可根据自己需要进行切换。 搭建整个过程如下： 初始化...
vue中配置路径别名
weixin_45974259的博客
03-02 1299
module.exports = { lintOnSave: false, configureWebpack: { resolve: { alias: {//配置路径别名//在vue中@默认代表src 'assets': '@/assets',//配置后表示在路径中直接使用'assets'代替'src/assets' 'common': '@/common', 'components': '@/componen.
卸载vuecli3_vue-cli3.0升级失败，vue-cli卸载不掉，万能解决办法
06-06
您可以尝试以下步骤来卸载vuecli3或vue-cli： 1. 打开命令行工具，并使用管理员权限运行它。 2. 输入以下命令来检查您已经安装的vue-cli版本： ``` vue --version ``` 3. 如果您已经安装了vue-cli 3.x版本，您...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值