vue中给文件夹配置别名（是在vue-cli3的条件下）

最新推荐文章于 2022-06-23 18:54:06 发布
最新推荐文章于 2022-06-23 18:54:06 发布
阅读量295 收藏
点赞数
分类专栏： vue 文章标签： Vue vue.config.js 别名 模块导入 路径配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_bird1999/article/details/120119369
版权

1、在根目录下创建vue.config.js

在这里插入图片描述

2、在文件家中写入以下内容

在这里插入图片描述

将要取别名的文件名字放入alias中，‘别名’：‘路径’。

在后面的引入中可直接引入，不用再学‘…/’之类的
在这里插入图片描述

努力向前的韭菜
关注
专栏目录
Vue给文件起别名——使用、报错及解决方法
Wzw的博客
03-12 3398
文件路径引用 在实战开发中，如果需要引用的文件层级很深，我们就可能遇到以下代码：<img src="../../../assets/image/home.icon"/>。 如果后续项目文件路径变化了呢？那么就需要手动去修改每个文件中的路径，在项目初始阶段文件不多时，这样做还有可能；一旦文件增多，这样一个个修改路径就很麻烦。 因此，我们需要在一开始时，就给文件夹起别名，这样不管层级多深或者文件路径更改，之后都直接用这个别名即可。 Vue-Cli3 在vue.config.js（如果没有，则在根目
Vue-cli搭建的项目中路径别名的配置
最新发布
weixin_49154644的博客
12-19 837
使用cli4.x创建的项目也可以进行以下配置。
vue-cli3配置文件夹别名alias
lijingjingjing22的博客
04-27 368
vue-cli3搭建的vue项目中没有build目录，相关的webpack配置也都隐藏了，官方文档中说需要在vue.config.js中配置 1.在根目录下创建vue.config.js(该文件名不能随意修改) 2.在文件中输入以下代码 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (con.
webstorm vue-cli3 配置别名
Moqin
10-24 4734
配置后就可以跳转到别名的函数了 我们知道在vue-cli1.x,vue-cli2.x  webstorm配置别名时候可以设置中指向webpack.base.conf.js就可以了 但是vue-cli3.x中是没有webpack.base.conf.js的，别名在vue-config.js中设置了， chainWebpack: (config) =&gt; { config....
vue(七)之文件夹别名、Promise
weixin_42968500的博客
02-21 235
给文件夹取别名 通过import导入的时候可以直接应用别名 而通过非import的方式引入的时候，要在别名前面加一个"~" Promise Promise是ES6的新增内容 通过setTimeout模拟异步请求 一秒钟后打印Hello World Promise的简单体会 通过promise可以将回调地狱转化为链式编程，结构更清晰，代码更优雅 Promise讲解 Promise的三种...
vue 配置路径别名
qq_42493241的博客
09-01 205
前言：在vue项目开发中有没有这种烦恼？一大堆”../“返回上一目录 那我们改如何省略掉”../“直接指定文件夹呢？可通过起别名来去除掉烦人的”../“ import NavBar from '../../../components/NavBar/NavBar.vue' 在项目的脚手架中创建vue.config.js 当然如果项目中存在此文件直接在里面写即可 module.exports = { configureWebpack : { resolve : { al.
vue-cli3中配置alias和打包加hash值操作
10-14
本文将深入探讨如何在 Vue CLI 3 中配置 `alias` 和添加 `hash` 值到打包文件名。 首先，我们来关注 `alias` 的配置。在开发大型应用时，我们常常需要引入大量的模块和文件，这时相对路径可能会变得非常冗长。`...
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias ...
vue-cli3全面配置详解
10-17
使用 Vue CLI 3 创建新项目，只需在命令行中输入： ```bash vue create project-name ``` 这里 `project-name` 是你的项目名称。Vue CLI 会引导你选择预设或者自定义配置。 ### 2. 配置环境变量 环境变量在开发过程...
vue为路径设置别名
stone_tomcate的博客
09-10 767
1. 为路径设置别名 在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名。 在vue.config.js中的chainWebpack中配置 config.resolve.alias.set('@', resolve('src')).set('_c', resolve('src/components')); ...
vue 配置别名
ybilss的博客
01-27 867
1.现在vue 基本都会配置别名, 在项目目录下, 新建 vue.config.js 文件, 2.如,路由配置,轻松搞定
alias cli3 配置_Vue Cli3 中别名的配置问题
weixin_39692045的博客
12-21 803
Vue Cli3 中别名的配置问题vue-cli3中是没有config、build等目录的，这是因为vue-cli3中将这些配置隐藏起来了，如果想要修改，可以在vue.config.js文件中进行修改。以下是在vue-cli3中配置别名的方法，在项目的根目录下的vue.config.js文件中，进行以下配置const path = require('path'); // 引入path模块funct...
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 3943
配置路径别名是提高代码可读性和可维护性的有效方法。通过使用路径别名，可以避免长路径引发的混乱，并使代码更加简洁和易于管理。保持一致性和中的别名配置需要一致。测试配置：在实际开发中测试别名配置，确保其能够正确解析路径。文档记录：在项目文档中记录路径别名配置，便于团队成员了解和使用。通过以上步骤，您可以在 Vue 3 + TypeScript 项目中有效地配置和使用路径别名，从而提升开发效率和代码质量。
Vue在外部配置打包文件夹名称和url地址前缀
06-23 5630
在public中添加以下两个js文件 vue.config.js: config_settings.js: 注意：在npm run build打包之前，需要先配置以上文件，使打包内容生效1、配置浏览器地址前缀，需要修改同时修改config_build.js中的ROUTE_PREFIX和config_settings中的ROUTE_PREFIX，并且这两个值需要保持一样。 2、配置打包文件夹名称，只需配置config_build中的ROUTE_PREFIX即可。3、如果打包出来的项目是放
vue中配置别名
weixin_44600183的博客
03-30 1451
标题vue中配置别名 在根目录创建名为 jsconfig.json 的文件 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*":["src/*"] } }, "exclude": ["node_modules","dist"] }
vue3为路径设置别名
infantttttt的博客
04-14 2655
为了避免代码中出现类似’…/…/src/assets/img/different.png’包含多个’…/’符号，可以为路径设置别名。 类似上述路径可直接用’@/assets//img/different.png’表示，将直接从src路径开始查找指定文件。（vue4默认将src文件夹重命名为@） 1.找到node_modules/@vue/cli-service/lib/config/base.js文件 2.找到’.set(‘@’, api.resolve(‘src’))‘（图中已有内容为vue4默认为sr
vue项目配置路径别名
韩大璐
02-20 1116
在 build–>webpack.base.conf.js 文件中找到以下代码，在alias中添加即可 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, ...
【vue】vue-cli中自定义路径别名 assets和static文件夹的区别
z767327552的专栏
03-12 4206
静态资源处理：assets和static文件夹的区别相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 &lt;img src="./logo.png"&gt; 和 background: url(./logo.png...
7.vue配置文件的alias(别名)
weixin_47254130的博客
02-13 565
1.文件路径的引用问题（配置文件路径vue.config.js） 2.在项目根目录下创建vue.config.js文件 3.vue.config.js内容： const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ chainWebpack:(config)=&gt
Vue-cli 2.8.1中Webpack配置详解及结构剖析
本文将深入解析vue-cli中的webpack配置细节，针对版本号为vue-cli 2.8.1和Vue 2.2.2以及webpack 2.2.1的环境，主要讨论`build`目录下的关键配置文件。目录结构清晰，主要包括`build.js`、`webpack.*.conf.js`等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值