在vue.config.js中配置文件路径代理名

news2024/11/26 3:30:49

今天在公司项目中看到一个非常有趣的导入路径
@crud
在这里插入图片描述
先是一蒙 这是个啥 突然想起一个被自己遗漏的知识点
在vue.config.js中配置路径指向

这里 我们随便找一个vue项目 在src下找到 components 目录 如果没有就创建一个
下面找到HelloWorld.vue 如果没有也是自己创建一个就好
然后 HelloWorld.vue 编写代码如下

<template>
  <div class="hello">
    代理组件
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

在这里插入图片描述
然后 在项目根目录下找到 vue.config.js
如果没有就手动建一个
然后 我的代码是这样的

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
    config.resolve.alias.set('@com', path.resolve(__dirname, 'src/components'))
  }
})

其实最重要的是

chainWebpack: config => {
  config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
  config.resolve.alias.set('@com', path.resolve(__dirname, 'src/components'))
}

声明在 module.exports 里面就可以了
首先第一个配置 @ 指向 src目录
然后 我们自己配了一个@com 指向src下的components目录
然后 我们在 App.vue编写代码如下

<template>
    <div><HelloWorld/></div>
</template>

<script lang="jsx">
import HelloWorld from '@com/HelloWorld';
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>

我们尝试通过自己配置的@com 引入HelloWorld组件
启动项目 效果如下
在这里插入图片描述
可以看到 我们组件也是很顺利的展示在了界面上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/941117.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LabVIEW开发异步电动机定子故障在线诊断系统

LabVIEW开发异步电动机定子故障在线诊断系统 三相感应电机&#xff08;IM&#xff09;因其简单性、坚固性和可靠性而广泛用于许多工业应用。然而&#xff0c;对于需要高可靠性的特定领域&#xff0c;如汽车、航空航天、军事和核能&#xff0c;使用经典的三相IM似乎不再适用&am…

JavaScript函数复习

这节课我们来通过我们之前学过的函数来逐渐完善&#xff01; const yearsUntilRetiremen (birthyear, firstName) > {const age 2037 - birthyear;const retirement 65 - age;return ${firstName}还有${retirement}年就退休了&#xff01;;}这个是我们之前写的代码&…

循环结构(个人学习笔记黑马学习)

while循环语句 在屏幕中打印0~9这十个数字 #include <iostream> using namespace std;int main() {int i 0;while (i < 10) {cout << i << endl;i;}system("pause");return 0; } 练习案例: 猜数字 案例描述:系统随机生成一个1到100之间的数字&…

数字电路-二进制学习

什么是二进制&#xff1f; 数字电路 中 只有 高电平 和低电平 就是 1 和0 进位规则是“逢二进一”&#xff0c;借位规则是“借一当二”。 二进制、八进制 、十进制、十六进制 二进制 有两个数来表示 &#xff1a; 0、1 八进制 有8个数来表示 &#xff1a; 0、1、2、3、4、…

ASEMI肖特基模块MBR400100CT功能应用介绍

编辑-Z 肖特基模块MBR400100CT是一款高性能半导体器件&#xff0c;常用于电源和开关电路中。该模块采用肖特基二极管技术&#xff0c;具有低导通压降和高速开关特性&#xff0c;适合在高频率和高温环境下使用。 肖特基二极管是基于金属-半导体接触的特殊结构的二极管。与传统P…

Go几种读取配置文件的方式

比较有名的方案有 使用viper管理配置[1] 支持多种配置文件格式&#xff0c;包括 JSON,TOML,YAML,HECL,envfile&#xff0c;甚至还包括Java properties 支持为配置项设置默认值 可以通过命令行参数覆盖指定的配置项 支持参数别名 viper[2]按照这个优先级&#xff08;从高到低&am…

博客系统后台前端UI设计

效果展示 API编写 index.js import axios from "./request"const fastdfs {delete: file/fastdfs/delete } const permission {search: "/sys/permission/search",add: "/sys/permission/add",update: "/sys/permission/update",d…

适合新手程序员的体质,一键代码审查轻松搞定

很多刚入行的程序员会面临一个问题&#xff0c;写完代码进行运行会出现很多bug但是不能准确的定位问题的所在&#xff0c;很多人对于自己的代码结构和层次也摸不着头脑&#xff0c;为了提高代码的质量经常会消耗大量的人力物力来做这件事情。 在&#xff08;软件工程的事实与谬…

阻塞io读取内核驱动变量值

应用程序&#xff1a; #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <string.h> #include <sys/ioctl.h> #include "head.…

Spring MVC 四:Context层级

这一节我们来回答上篇文章中避而不谈的有关什么是RootApplicationContext的问题。 这就需要引入Spring MVC的有关Context Hierarchy的问题。Context Hierarchy意思就是Context层级&#xff0c;既然说到Context层级&#xff0c;说明在Spring MVC项目中&#xff0c;可能存在不止…

Linux学习之DNS服务的原理

DNS服务一些理论 域名系统&#xff08;Domain Name System&#xff0c;DNS&#xff09;是互联网的核心应用服务&#xff0c;可以通过IP地址查询到域名&#xff0c;也可以通过域名查询到IP地址。 FQDN&#xff08;Full Qualified Domain Name&#xff09;是完全限定域名&#xf…

解决FreeRTOS程序跑不起来,打印调试却提示“Error:..\FreeRTOS\port\RVDS\ARM_CM3\port.c,244“的方法

前言 今天来分享一个不会造成程序编译报错&#xff0c;但会使程序一直跑不起来&#xff0c;并且通过调试会发现有输出错误提示的错误例子分析&#xff0c;话不多说&#xff0c;我们就直接开始分析~ 首先&#xff0c;我们说过这个例子在编译时候没有明示的错误提示&#xff0c…

Excel·VBA二维数组组合函数、组合求和

目录 1&#xff0c;二维数组组合函数举例 2&#xff0c;组合求和 之前的文章《ExcelVBA数组组合函数、组合求和》和《ExcelVBA数组排列函数》&#xff0c;都是针对一维数组的组合和排列 二维数组组合&#xff1a;对一个m行*n列的二维数组&#xff0c;每行抽取1个元素进行组合&a…

[管理与领导-56]:IT基层管理者 - 扩展技能 - 1 - 时间管理 -3- 帮助下属提升效能(辅导与激励)

前言&#xff1a; 对下属的辅导是管理者一个重要的职责&#xff0c;帮助下属者提升时间效能也辅导下属的一个职责。 管理者与下属&#xff0c;管理者与团队是“共生”的关系&#xff0c;管理者提升下属的时间效能&#xff0c;就是提升团队的效能&#xff0c;也就是提升了自己…

计算机视觉-LeNet

目录 LeNet LeNet在手写数字识别上的应用 LeNet在眼疾识别数据集iChallenge-PM上的应用 LeNet LeNet是最早的卷积神经网络之一。1998年&#xff0c;Yann LeCun第一次将LeNet卷积神经网络应用到图像分类上&#xff0c;在手写数字识别任务中取得了巨大成功。LeNet通过连续使用…

Linux各类性能分析工具用法详解

文章目录 静态性能分析工具文件系统观测工具虚拟文件系统(VFS)分析工具磁盘管理工具进程资源占用监测系统库调用分析工具网络配置防火墙配置多路径配置进程调度系统命令操作查看硬件信息磁盘管理网络端口硬件信息 监测工具内核调用监测系统调用监测系统函数调用监测系统性能监测…

【VRTK4.0运动专题】轴移动AxisMove(真实身体的移动)

文章目录 1、概览2、释义3、属性设置 1、概览 2、释义 “竖直轴”控制的行为“水平轴”控制的行为1Vertical-Slide 滑动Horizontal-Slide 滑动2Vertical-Slide 滑动Horizontal-SmoothRotate 转动3Vertical-Slide 滑动Horizontal-SnapRotate 转动&#xff08;不连续&#xff09…

PDF制作成翻页电子书

在日常工作中&#xff0c;大部分人使用的都是PDF文档发送给客户&#xff0c;但是PDF文档通常是静态的&#xff0c;缺乏交互性和视觉吸引力。那你有没有想过把它转换成翻页的电子书呢&#xff1f; 小编将告诉你操作步骤&#xff0c;非常简单 1.搜索FLBOOK在线制作电子杂志平台 …

零基础搭建个人影音媒体平台,实现远程访问Jellyfin播放器的简易方法

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

静态树提升对Vue生态系统的影响和发展

文章目录 1. 了解Vue 3的静态树提升介绍Vue 3的基本概念和优势解释静态树提升的作用和目标 2. 什么是静态树&#xff1f;解释静态树的概念和特点比较静态树和动态树的区别 3. Vue 3中的静态树提升解释Vue 3中静态树提升的原理和工作方式强调静态树提升对性能的影响和优化效果 4…