Vue3-路径别名alias配置

在项目中频繁的使用components/XXX.vue太影响效率了，vscode的插件也没有解决这个问题，其实可以使用别名配置来减少编码数量。

1. 在项目根目录新建文件，重命名为vite.config.js
   3. 配置如下，这个配置是按照官方文档改写的

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
        	//这里猜测应该是一个map，key为别名，value为你要别名的路径
            "@": path.resolve(__dirname, "src"),
            "coms": path.resolve(__dirname, "src/components"),
        },
    },
    //服务器的端口监听端口配置和host设置
    server: {
        host: "localhost",
        port: 3000,
        https: true
    },
})

4. 在模板中使用

<script>
import Home from "coms/Home.vue";

export default defineComponent({
  components: { Home },
  setup() {
    return {
      Home,
    };
  },
});
</script>

今天的分享到此为止，如有不正确的地方请各位大佬及时指出。