如果在Vite项目中使用@无法找到文件,通常是因为未正确配置路径别名(path alias)导致的。在Vite中,您可以使用vite.config.js文件来配置路径别名。

以下是一个示例的vite.config.js文件,展示了如何配置路径别名:

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

在上述示例中,我们使用alias选项来配置路径别名。通过@别名,我们将./src目录与@关联起来。

请确保将路径别名配置为与您的项目结构和实际路径相匹配。一旦配置了路径别名,您就可以在您的代码中使用@来引用文件,例如:

在这里插入图片描述在这里插入图片描述

//配置less @ 跨域

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 配置@
import path from 'path';
// 配置less
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  // 跨域
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});







Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐