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

今天在公司项目中看到一个非常有趣的导入路径
@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组件
启动项目 效果如下

可以看到 我们组件也是很顺利的展示在了界面上