vue3 + vite配置路径别名@

如果使用vite创建vue3的项目,需要在vite.config.js中配置@才能使用

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

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {},
  },
  // ↓解析配置
  resolve: {
    // ↓路径别名
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
});

注意:如果找不到path或者报错

 需要运行安装下

npm install @types/node

vue3 + vite配置路径别名@_第1张图片

注意:如果还是报错需要在tsconfig.json中配置一下

vue3 + vite配置路径别名@_第2张图片

{
  "compilerOptions": {
    // ↓解析非相对模块的基础地址,默认是当前目录
    "baseUrl": "./",
    // ↓路径映射,相对于baseUrl
    "paths": {
      "@/*": ["src/*"]
    }
}

 vue3 + vite配置路径别名@_第3张图片

你可能感兴趣的:(vue.js,前端,javascript)