vite-vue3-ts 搭建项目时项目中使用 @ 指代 src

最新推荐文章于 2024-07-28 19:45:44 发布

时遇¥.¥..

最新推荐文章于 2024-07-28 19:45:44 发布

阅读量1k

点赞数 1

分类专栏： vue 笔记 javascript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46544600/article/details/126177695

版权

笔记同时被 3 个专栏收录

51 篇文章 2 订阅

订阅专栏

javascript

22 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中如何通过配置Vite来实现使用@符号引用src目录的通用做法。首先需要安装必要的依赖，然后在vite.config.ts中设置别名，将@映射到src目录。接着，展示了在路由配置中如何使用这个路径导入组件。通过这些步骤，可以方便地在整个项目中统一引入文件。

摘要由CSDN通过智能技术生成

目前在 Vue 项目中比较通用的做法是：使用 @ 表示 src 目录，引入时就可以使用 @/views/home/index.vue，不管引入文件在任何地方，都可以使用这个路径进行引入。但是这个用法并不被默认支持，需要通过一番配置才可以正常使用。

配置步骤：

1. 加载需要依赖

yarn add path
yarn add @types/node // 不加这个 __dirname 会报异常

2. vite.config.ts 中配置

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

import { resolve } from "path"; // 引入方法


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [ // 配置 @ 指代 src
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
  },
  server: {
    port: 9527,
  },
});

4. 使用 router/index.ts

// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/home/index.vue'),
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;