在项目中频繁的使用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
    },
})
  1. 在模板中使用
<script>
import Home from "coms/Home.vue";

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

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

Logo

前往低代码交流专区

更多推荐