vue3.0--vite配置别名路径

这里记录一下关于Vite搭建的Vue3.0项目，别名路径的配置，直接上代码

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');

//npm i unplugin-vue-components -D

// 配合上方 实现ele-plus按需引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config src/auto-import.d.ts/
export default defineConfig({
  plugins: [
    vue(),
  Components({
      resolvers: [
        ElementPlusResolver(),
      ],
      dts: true,
    }),

  ],
  resolve:{
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
      },
  }
})

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
}

使用方法

<template>
  <div class="a">
    <Title></Title>
  </div>
</template>
<script setup >
import Title from "@/view/Title.vue"
</script>

关于上面提到的按需引入

npm i -D unplugin-auto-import

vite.config.js

import AutoImport from "unplugin-auto-import/vite";
 
export default {
  plugins: [
    AutoImport({
        // 自动导入vue相关的Api
        imports: ["vue"],   // 也支持vue-router、axios等
        // 声明文件的存放位置
        dts: 'auto-imports.d.ts',
    }),
  ],
}

这样，无需引入就可以随意使用Api
例如：

<template>
  <div>你好~~~~{{name}}</div>
</template>
<script setup >
const name = ref('同事');
</script>

全部配置

import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
 
import AutoImport from "unplugin-auto-import/vite";
 
// elementplus相关包
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// elementPlus提供的开箱即用的tree shaking功能
import ElementPlus from "unplugin-element-plus/vite";
 
const { resolve } = require("path"); //必须要引入resolve
 
// 数据mock配置
import { UserConfigExport, ConfigEnv } from "vite";
import { viteMockServe } from "vite-plugin-mock";
 
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            vue(),
            vueJsx(),
            AutoImport({
                // 自动导入vue相关的Api
                imports: ["vue"],  // 也支持vue-router、axios等
                // 声明文件的存放位置
                dts: 'src/auto-imports.d.ts',
            }),
            // 自动导入element的组件
            Components({
                resolvers: [ElementPlusResolver()],
                dts: true,
            }),
            ElementPlus(),
            viteMockServe({
                // ↓解析根目录下的mock文件夹
                mockPath: "mock",
                localEnabled: command === "serve",
                supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
                watchFiles: true, // 监视文件更改 更改mock的时候，不需要重新启动编译
            }),
        ],
        // 配置别名
        resolve: {
            alias: {
                "@": resolve(__dirname, "src"),
                "@store": resolve(__dirname, "src/store"),
            },
        },
        server: {
            host: "", // 监听的IP地址
            port: 8081, //启动端口
            open: true, // 自动打开
            proxy: {//代理的地址
                "/api": {
                    target: "",
                    changeOrigin: true,
                    rewrite: path => path.replace(/^\/api/, ""),
                },
            },
        },
    };
};