Vue3中使用resolve进行路径别名设置

Vue3中使用resolve进行路径别名设置

使用Vite初始化Vue3项目工程请参考文章：Vite创建Vue3工程并引入ElementPlus（图文详细）

1.使用~路径别名替换根目录，使用@路径别名替换src目录

在vite.config.js配置文件下添加如下配置

import path from "path";
export default defineConfig({resolve: {// https://cn.vitejs.dev/config/#resolve-aliasalias: {// 设置路径"~": path.resolve(__dirname, "./"),// 设置别名"@": path.resolve(__dirname, "./src")},// https://cn.vitejs.dev/config/#resolve-extensionsextensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]},
}

将main.js的src相对路径设置为~路径别名

import { createApp } from "vue";
import "@/style.css";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";const app = createApp(App);
app.mount("#app");