当前位置：首页 > news >正文

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

news 2025/6/28 21:07:29

今天在公司项目中看到一个非常有趣的导入路径
@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>