首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

`Vue3 - Vite`项目别名src to @ not working

Vue3 - Vite项目别名src to @ not working是关于Vue3和Vite项目中别名配置不起作用的问题。以下是对这个问题的完善且全面的答案:

问题描述: 在Vue3和Vite项目中,当尝试使用别名配置将"src"目录路径替换为"@"时,别名配置不起作用。

解决方案:

  1. 确认项目配置:
    • 确保已经正确安装了Vue3和Vite,并创建了一个基本的Vue3 - Vite项目。
    • 确认项目根目录下是否存在vite.config.js文件,该文件用于配置Vite的相关选项。
    • 确保在vite.config.js文件中有正确的别名配置。
  • 配置别名:
    • 打开vite.config.js文件,可以通过alias选项来配置别名。
    • 确保正确配置了别名,并将"src"路径映射为"@"。
    • 例如:
    • 例如:
    • 确保路径映射正确,使用绝对路径。
  • 使用别名:
    • 在项目中使用别名时,确保在导入模块时使用"@"代替"src"。
    • 例如,在Vue组件中:
    • 例如,在Vue组件中:
    • 确保所有使用了"src"路径的地方都进行了替换。
  • 重启项目:
    • 在修改了别名配置后,需要重启项目,以使新的配置生效。

总结: Vue3 - Vite项目中别名配置不起作用的问题通常是由于配置错误或路径替换不完全所致。通过正确配置别名,并在项目中使用正确的别名路径,可以解决这个问题。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了一系列的云计算产品,包括云服务器、云数据库、云存储等。您可以访问腾讯云官网了解更多相关产品信息:腾讯云官网。对于Vue3 - Vite项目来说,推荐使用腾讯云的云服务器和云存储服务,以提供稳定的服务器环境和高效的存储解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue3 + Vite + TypeScript 项目搭建总结

开年的第一篇文章献给 vue3,咱也紧跟着尤大大的脚步,在加班的日子里捣鼓了一番 vue3+vite+typeScript,在查阅了众多资料和实践后,终于搭建好了一个完整的项目,好记性不如烂笔头,来记录一下搭建过程...v20.11.1) 三.搭建步骤 1.第一种方法:使用 NPM 构建 cd 进入你要创建项目的目录位置(即你项目要存储的位置,我这儿是:F:\newCodePlace) $ npm init vite...,无需额外手动引入 vite 和 typeScript 项目结构如下: image.png 注意: 如果用第一种方法创建的项目,直接跳到 步骤4 2.第二种方法:可以通过附加的命令行选项直接指定项目名称...): $ npm init vite@latest my-vue-app -- --template vue 注意:此命令创建的项目并无 vite 和 ts 模块,需要额外配置。...,版本错误的话无法使用路由进行跳转 5.新建 router/index.ts 文件 在项目 src 目录下创建src/router/index.ts文件,并写入路由配置 import { createRouter

27810

Vue3】利用vite创建vue3项目

文章目录 前言 vite简介 利用vite创建vue3项目 结构目录 一个小BUG 总结 ---- 前言 vite是一个web开发构建工具,由于其原生ES模块导入方式,可以实现闪电般的冷服务器启动。...相对于webpack可以更快创建项目。 注意:vite不支持IE11 ---- vite简介 vite主要由两部分组成: 一个开发服务器,它利用原生ES模块提供了丰富的内建功能。...vite两个子命令: serve:启动一个用于开发的服务器 build:构建整个项目,也就是上线 利用vite创建vue3项目 首先我们需要用到npm进行创建,如果npm的版本是6.x,则使用以下代码:...最后输入npm run dev运行项目,我们可以发现,使用vite运行起来速度也是非常快的,在浏览器输入local中的地址,就运行成功啦!...结构目录 以下是创建完成后的项目结构目录,node_modules文件夹是整个项目的依赖;public文件夹是静态资源文件夹,用来存放静态资源的;src文件夹是源代码部分,编写的代码都是放在src中的噢

1.1K30
  • 使用Vite重构Vue3项目

    前言 截止发文时间,vite正式版已经发布快2年时间了,vue3也发布到3.2版本了,它的周边设施基本上已经齐活了。也是时候再次重构下我那个vue3.0的开源项目了。...环境搭建 1年多前,我用Vue Cli 4.5构建的此项目,有关此项目的更多细节请移步我的另一篇文章使用Vue3重构Vue2项目。...同样的,从CLI迁移到Vite仍然是在package.json中添加vite的依赖项,在项目中添加它的配置文件。...作为占位符,可以直接写/来访问,vite会将其解析到public根目录下 通过<script type="module" src="..."...最后,我们创建vite.config.ts文件,配置代码如下所示: 设置开发环境的端口号 设置路径别名 设置打包后base地址以及打包输出目录 import { defineConfig } from

    1.9K10

    Vite + Vue3 项目的创建 ,启动 ,停止

    第一步:使用命令行创建工程 在磁盘的合适位置上,创建一个空目录用于存储多个前端项目 用vscode打开该目录 在vocode中打开命令行运行如下命令 npm create vite@latest 第一次使用...vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了 注意:选择vue+JavaScript选项即可 第二步:安装项目所需依赖 cd进入刚刚创建的项目目录 npm install命令安装基础依赖.../vue3-demo1 npm install 第三步:启动项目 { "name": "demo07-vue02", "private": true, "version": "0.0.0",..."type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite...": "^5.2.0" } } npm run dev 初始化页面样式: 停止项目: 命令:Ctrl + C

    1.1K10

    使用VSCode搭建UniApp + TS + Vue3 + Vite项目

    创建uniapp项目由于我们要使用VSCode去开发项目,而且项目要使用Vue3和TypeScript,所以我们要使用命令行去创建uniapp项目。...先进入我们存放VSCode的项目目录,我的项目目录是D:\VSProjects,进入后,执行命令如下:npx degit dcloudio/uni-preset-vue#vite-ts 项目名称项目名称写你自己真实的项目名称就可以了...这个命令会把官方提供的使用了TypeScript和Vite的uniapp项目模板下载下来,然后我们就可以去开发uniapp项目了。...我们使用VSCode打开项目项目的目录如下:我们可以看到src目录里的文件都是uniapp项目的文件,包括页面、样式、静态文件等,src目录外是整个项目的文件,如:vite.config.ts和tsconfig.json...,项目中还是用了Vue3,Typescript,Vite,该装的插件也已经装上了,鼠标悬停会给我们组件的提示,大大提高了我们的开发效率。

    24200

    做个开源博客学习Vite2 + Vue3 (二)设置别名、代理和ESLint

    vite2可以有很多配置,也可以都使用默认配置,这个看项目需要。...vite1.0是/@/ 2.0改为/@ // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件 resolve: { alias: { "/@":...pathResolve("src"), "/config": pathResolve("public/config"), "/com": pathResolve("src/components...测试运行 运行vue的项目,向后端申请数据, 这时候会先提交到vite2启动的web服务, 然后判断后再转给node建立的web服务, 处理之后返给node建立的web服务, 最后返给浏览器。...vue-cli建立项目的时候就非常简单,我们选择一个风格就可以自动安装了,现在vite2还不够自动化,需要我们自己安装,今天学习了一下,补充这块短板。

    1.3K30

    【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目

    【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目 hello大家好我是雪人⛄,不知不觉断更好久了,经过了长时间的学习,终于踏入了前端工程化的大门...GitHub:LonelySnowman/sv3-template 官方文档:SV3-Family | Vue3 前置知识:Vue全家桶,了解Vite或WebPack等构建工具,Node.js 您将收获到...Vue3全家桶 我们既然要开发Vue项目,Vue全家桶当然是最重要的,使用pinia进行状态管理,使用vue-router进行路由管理,axios进行http请求等等。.../router/index.ts 这里路径中用到了 @ 是我们配置的别名,指向了src,在后面会讲解到如何配置 import { createRouter, createWebHashHistory,...", // 为导入路径配置别名 "paths": { "@/*": ["src/*"], "#/*": ["types/*"] }

    1.4K10

    Vue3 + Vite2 项目实战复盘总结(干货!)

    内容概要 •背景•vue3 项目开发 get 到的知识•让我惊讶的 vite项目中遇到的困难•总结•项目技术栈•资料推荐 背景 有一个新项目启动,移动端项目兼容安卓 6+,没有历史包袱,技术选型可以自由发挥...考虑到项目周期/团队技术/学习成本,最后选取还算比较新的 vue3。...vue2 我是轻车熟路,vue3 我是面向文档开发。选择了用 vue3,就要去 get 他的精华,用着用着我发现真香,vue3vite2 结合的项目惊讶到我了。...让我惊讶的 vite 开发体验对比 项目启动&&项目打包&&项目体积 ps:由于 vue-cli 和 vite 的环境变量读取方式和某一些 css 的引入方式不一样,在 vue-cli 里面我就注释了相关的代码...项目中使用到的技术栈及文档 vite.config 的配置文档 [4] 路由 router[5] vue3[6] 轮播插件swiper[7] 虚拟滚动vue3 版本[8] vue3/vite资料推荐 昨晚尤大的连麦直播

    1.4K50

    初探 vite2 + vue3 vite2 构建项目:安装第三方控件script setup

    创建项目 vite2 构建项目: 建议使用yarn,可以更快一些。 yarn create @vitejs/app 然后按照提示操作即可!...": resolve("src/apis"), "views": resolve("src/views"), "utils": resolve("src/utils"), "routes...()] 这个是默认的,上面的别名可以自己设置,还可以有其他设置,总之很多的样子。...如果说 vue3 的composition API 带来的心智难度是1 (约束性变小) 的话,那么这个vite2带来的难度大概是 2 (约束性几乎没了),想要驾驭好更难了一些。...vue3 还可以不太在意分出来js文件,但是现在是必须分出来单独的js文件了,否则那代码真的是不敢看。 正在尝试写个博客具体体验一下。

    1.7K20

    vite + ts 快速搭建 vue3 项目 以及介绍相关特性

    博客地址:https://ainyi.com/98 Vue3.0,==One Piece== 接下来得抽空好好学习了 vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对...Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的...在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init vite-app 安装 typescript、vue-router@next、axios、eslint-plugin-vue、sass 等相关插件 配置 vite.config.ts vite.config.ts 相当于.../**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/types/images.d.ts", "tests/**/*.ts",

    3.5K11
    领券