您现在的位置是:首页 > 正文

vue关于@无法找到文件报错

2024-02-01 05:00:10阅读 3

如果在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/, ""),
      },
    },
  },
});







网站文章

  • Springboot之Thymeleaf 表单标签(表单提交)|第二章-yellowcong 热门推荐

    Springboot之Thymeleaf 表单标签(表单提交)|第二章-yellowcong 热门推荐

    通过post方式提交表单的时候,需要有一个实体类,去接收表单传递的数据类容,在对象的属性读取中,Thymeleaf 提供了两种方式:1、直接通过${userInfo.username} ,这种实体bean + 属性的方式;2、通过选择表达式*{username}的这种方式。 在表单提交的表单中,表单对象需要在界面跳转进来的时候,传递一个表单对象过来,不然就会报错,不知道这个表单对象是什么鬼。 代码

    2024-02-01 04:59:38
  • Docker swarm部署控制

    Docker swarm部署控制

    还记得我之前写过一片文章叫做《Docker快速部署项目,极速搭建分布式》,在那里讲述了如何去使用docker swarm,如何构建自己的私人镜像仓库。随着最近的业务量的增长,机子加多。对于docker...

    2024-02-01 04:59:32
  • linux下的export和source命令

    1、source命令 source ~/.../../file source命令作用:source是bash shell的内置命令,在当前shell下读取并执行“file中的命令” 通常用于重新执行刚...

    2024-02-01 04:59:05
  • 计算机导论与计算机组成原理关系,计算机组成原理

    一 、课程简介课程中文名称:《计算机组成原理与汇编语言》课程英文名称:Computer principle and assembly language课程编号:ZYB08003课程性质:专业必修课学时...

    2024-02-01 04:58:57
  • 什么是分布式事务?

    什么是分布式事务?

    目录什么是事务什么是分布式事务分布式事务使用场景什么是事务我们先来回顾下什么是事务https://blog.csdn.net/Delicious_Life/article/details/105466...

    2024-02-01 04:58:53
  • html字体大小有最小值

    今天写代码的时候发现font-size 属性中字体大小有一个最小值 12px,在谷歌浏览器中一直调又是一个小发现。

    2024-02-01 04:58:25
  • mysql 题1

    (1)查询计算机系学生的修课情况,要求列出学生的名字、所修课的课 程号和成绩。 select SNAME,cno from sc ,student where dept = '计算机系&#39...

    2024-02-01 04:58:19
  • java基础(十九)非标准json字符串转json对象的处理

    需求事件: 前端要使用vue进行文件的上传,但是由于前端框架的封装原因,只能通过url编码进行上传文件中的附带参数的传递,因此有了今天的处理过程。 并且前端由于业务原因,添加了一些不属于后端vo对象的...

    2024-02-01 04:58:11
  • 惠普服务器cpu芯片,惠普、戴尔推出ARM服务器_Intel服务器CPU_服务器产业-中关村在线...

    惠普服务器cpu芯片,惠普、戴尔推出ARM服务器_Intel服务器CPU_服务器产业-中关村在线...

    惠普、戴尔推ARM服务器对英特尔是致命打击?10月31日,惠普和戴尔这两个英特尔无论在消费领域还是服务器领域的长期盟友也选择了“背叛”。在2013ARMTechCon会议上公布了推出ARM服务器的计划...

    2024-02-01 04:58:04
  • localStorage使用总结,页面跳转,保存值

    例子 <ul id="edit" contenteditable="true"> <li>修改我吧,然后刷新页面看看,^_^</l...

    2024-02-01 04:57:34