vue-cli4 手动给文件起别名

最新推荐文章于 2022-03-15 21:56:25 发布
最新推荐文章于 2022-03-15 21:56:25 发布
阅读量315 收藏
点赞数
分类专栏： vue 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45770253/article/details/119241203
版权
这篇博客介绍了在Vue项目中配置别名的两种方式。第一种是通过在根目录创建vue.config.js文件并引入path模块进行配置，然后重新运行项目。第二种方法是直接编辑node_modules下的@vue/cli-service/lib/config/base.js文件中的webpackConfig.resolve.alias部分。这两种方法都能实现文件路径的快捷引用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一种：找到 vue.config.js 在该文件中配置，没有这个文件的话，就在根目录下创建一个 vue.config.js 文件，然后配置如下
在这里插入图片描述

需要引入 path 模块，没有引入的话安装一下： npm install path --save
以后找文件就可以这么找：在这里插入图片描述在这里插入图片描述当然配置完成后要重新运行下项目

第二种：找到 node_module 文件夹，找到下面的 @vue 文件夹，找到下面的 cli-service 文件夹，找到下面的 lib 文件夹，找到下面的 config 文件夹，找到下面的 base.js 文件夹，找到 webpackConfig.resolve 的代码块，里面的 .alias 就是起别名的代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

webpack手动配置vue-cli脚手架详细处理
panerchao的博客
06-03 210
【代码】webpack手动配置vue-cli脚手架详细处理。
vue-cli4打包最强优化（10M变300kb）
m0_70275087的博客
05-04 1367
//配置alias别名后 import Home from ‘views/Home.vue’ //也可以这么写 import Home from ‘@/views/Home.vue’ [](()项目结束后打包前webpack配置 ==================================================================================== 目的： 提高打包速度 减小项目体积、提高首屏加载速度 提高用户体验（骨架屏） 打包前必做 项目开
vue cli4 给文件夹取别名
qq_37196621的博客
02-23 541
1.在根目录创建vue.config.js配置文件 添加代码，注意文件夹名不要写错 const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } module.exports = { publicPath: './', chainWebpack: config => { config.resolve.alias .
vue-cli 3x 配置 =＞ 给路径起一个别名
weixin_47409897的博客
09-03 341
目录vue-cli 3x 配置 => 给路径起一个别名上面给 src 和 src/components 等起了一个别名，那么在项目之中引用即可 vue-cli 3x 配置 => 给路径起一个别名 在根目录下创建vue.config.js var path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: confi
VueCli4中给路径起别名
qq_41501190的博客
01-10 680
1.项目根目录向新建vue.config.js文件 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ chainWebpack:(config)=>{ //给路径起别名 config.resolve.alias .set('@',r
关于vue-cli 3.x目录配置别名的问题
zwzw2323591的博客
08-18 1908
近用vue-cli新建工程的时候，发现安装完成之后找不到config、build等目录，不懂要从哪里目录配置别名 后面发现目录下有一个vue.config.js文件,后面查了一下,发现可以在这个文件里配置 const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } modul...
Vue-cli4创建项目，给目录起别名
weixin_44927585的博客
07-20 553
1.首先在根目录创建vue.config.js文件 2.代码如下 module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'n
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
Vue-CLI3中文指南 完整版PDF
03-20
通过`vue.config.js`文件，可以自定义Vue CLI的行为，如调整端口、配置Webpack、添加别名等。 七、Vue CLI3插件 Vue CLI3支持丰富的插件生态系统，通过`vue add`命令安装，如`vue add axios`可快速集成HTTP库axios...
Electron+vue-cli4开发跨平台桌面应用详细流程
weixin_44714325的博客
01-25 1098
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3，在完全保留vue开发web
修改Vue打包后的默认文件名操作
10-14
主要介绍了修改Vue打包后的默认文件名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli 3.0 添加文件引用的别名
TionSu的博客
02-19 1646
1、新建vue.config.js   2、复制如下格式的代码 代码： module.exports = { configureWebpack: { resolve: { alias: { 'api': '@/api', 'assets': '@/assets', 'components': '@/component...
Vue-cli4生成的文件目录含义
weixin_46412213的博客
02-03 1545
Vue-cli4生成的文件目录含义node_modulespublicsrcassetscomponentrouterviewsAPP.vuemain.js.browserslistrc.editorconfig.eslintrc.js.gitignorebabel.config.jspackage.jsonscriptsdependencies（项目依赖库）devDependencies（开发依赖库）gitHookslint-stagedpackage-lock.jsonREADME.md node_m
vuecli修改src文件夹名_python：批量修改文件名，文件夹名
weixin_35192322的博客
01-24 237
# -*- coding: utf-8 -*- import os import random #设定文件路径 path = r'C:UsersAIDesktop0' ls = [] # 对目录下的文件进行遍历 for file in os.listdir(path): ls.append(file) # 按照顺序排序修改 # ls.sort(key=lambda x: int(x[:-...
vue项目cli4中使用别名：“@”和“~”的坑。
迷雾总会解
05-13 5122
  在cli4中并没有像cli2中一样，拥有一个webpack.base.config.js文件,可以让我们直接写别名。 (以下仅仅是我所生效的配置，不同的可能不一样,因为我直接用网上的配置无效，所以摸索了一下，能正常运行) 创建vue.config.js文件 目录结构 没错，这个文件是和src在同一级目录下 配置文件中写入以下代码 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__d
vue-cli4配置文件别名
weixin_46313540的博客
05-21 632
具体步骤如下： 1、在项目中新建vue.config.js文件    注意：此文件要与src文件夹同级 ； 修改此文件后，需要重启项目 2、在vue.config.js文件中配置如截图 　　第一个参数：是你设置的别名 　　第二个参数：所指向的路径 module.exports={ configureWebpack:{ resolve:{ alias:{ "assets":"@/assets",
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 4303
配置路径别名是提高代码可读性和可维护性的有效方法。通过使用路径别名，可以避免长路径引发的混乱，并使代码更加简洁和易于管理。保持一致性和中的别名配置需要一致。测试配置：在实际开发中测试别名配置，确保其能够正确解析路径。文档记录：在项目文档中记录路径别名配置，便于团队成员了解和使用。通过以上步骤，您可以在 Vue 3 + TypeScript 项目中有效地配置和使用路径别名，从而提升开发效率和代码质量。
Vue CLI3搭建的项目中，如何给文件夹起别名?
科技向善
02-03 1274
因为这段大年的时间里，好久没写博客了，是好懒散了。真的是少年易老学难成，一寸光阴不可轻啊。浪费一秒钟是一秒钟的罪过。 我们使用Vue CLI3搭建的项目中，在vue.config.js文件中，在给文件起别名的时候，可以如下: module.exports = { configureWebpack: { resolve: { alias: { 'asset...
Vue系列Vue-cli 4配置别名（六）
日常分享工作中的一些技术干货。
07-25 4054
前言 vue-cli3或者4中使用脚手架创建的项目，没有webpack.base.config.js文件，那么咋搞？ 手动创建呗？ 就可以配置一些额外的操作了，如何配置别名呢，直接上手吧。 一、创建vue.config.js文件 注意：vue.config.js与src在同一个目录哦，也就是在你项目名称第一个目录下，你就可以创建这个文件夹了。 二、编写vue.config.js代码 const path = require('path'); //引入path模块 function resol
npm run dev vue-cli-service 不是内部或外部命令,也不是可运行的程序 或批处理文件。
最新发布
03-18
### 解决 `npm run dev` 报错问题 当运行命令 `npm run dev` 提示 `vue-cli-service not recognized` 错误时，这通常表明项目缺少必要的依赖项或者环境配置不正确。以下是可能的原因以及解决方案： #### 可能原因分析 1. **Vue CLI 未全局安装** 如果 Vue CLI 没有被正确安装到全局环境中，则可能导致无法识别 `vue-cli-service` 命令[^3]。 2. **本地依赖缺失或损坏** 当项目的 `node_modules` 文件夹中的依赖包丢失或损坏时，也会引发此类错误[^4]。 3. **脚本定义错误** 在 `package.json` 中的 `scripts` 部分可能存在拼写错误或其他配置问题[^5]。 --- #### 解决方案 ##### 方法一：重新安装 Vue CLI 工具链 如果尚未全局安装 Vue CLI 或者版本过旧，可以尝试通过以下命令来修复： ```bash npm install -g @vue/cli ``` 验证是否成功安装并查看当前版本号： ```bash vue --version ``` 此操作可确保开发工具链处于最新状态[^6]。 ##### 方法二：清理缓存与重装依赖 有时 NPM 缓存会干扰正常构建流程，因此建议先清除缓存再重新安装所有依赖库： ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` 上述步骤能够有效处理因文件冲突引起的异常情况[^7]。 ##### 方法三：检查启动脚本设置 打开项目根目录下的 `package.json` 文件，确认是否存在如下类似的字段结构： ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ``` 如果没有发现对应的键值对，请手动补充进去；另外注意大小写的准确性以免引起误解读取失败现象发生[^8]。 最后执行正确的服务指令代替原始形式： ```bash npm run serve ``` > 注明：现代版 Vue 推荐采用 `npm run serve` 替代传统意义上的 `dev` 别名调用方式[^9]。 --- ### 示例代码片段展示 下面给出一段简单的 HTML 结构作为应用入口模板参考[^2]: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> ``` --- #### 总结说明 综上所述，针对该类报错需逐一排查以上提到几个方面因素，并采取相应措施加以修正即可恢复正常运作模式[^10]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凉爽爽爽爽爽爽爽爽爽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值