vite基础，vite中 `@`符号是不被支持，不用@符号，直接用层级（./，../等）

最新推荐文章于 2024-03-30 18:05:27 发布
最新推荐文章于 2024-03-30 18:05:27 发布
阅读量5.8k 收藏 2
点赞数 1
分类专栏： 前端 基础 文章标签： 前端 vue.js 移动端 经验分享 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c62387723sq/article/details/126062162
版权

vite

在这里插入图片描述

vite的优势：

在这里插入图片描述

package.json中：

在这里插入图片描述

vite.config.js中配置 vueCompikerOptions

在这里插入图片描述
vite.config.js得自己创建

vite实现原理

传统的：
在这里插入图片描述
最关键的是要有entry入口和出口

需要把图片，sass代码和组件等全部打包转为html，css和js，再输出（bundle过程，开发的过程也是bundle过程），再给到server ready（开发服务器）启动web server，然后才能在浏览器看到效果
在这里插入图片描述
不论是改了哪些东西，都得先进行编译存到内存，启动server服务，然后在浏览器中才能看见

这个过程麻烦的地方：

有些地方没改也要重新编译，很浪费资源

所以在vite中有一个概念：

只去更新你更新过的代码就可以了

在生产环境就根本不打包

为什么要打包？

1、你现在的代码大多是es6 es7 es8的语法，很多的浏览器是不支持的需要转义
2、你写了各种组件，各种文件，这些内容都是分散开来的，但他们相互之间有各种各样的联系，这些代码需要合并
3、css，js也需要合并

现在浏览器基本上能对es的语法支持了

所以vite的做法：

在这里插入图片描述
先启动服务器
在进入entry入口，再去找文件，这些文件是不打包的
你请求哪个文件，它就按照es的模块化的语法去加载这个文件
vite最大特点： 开发环境下 压根 不打包

vite用法：

npm init @vite/app

1、起项目名字
2、要使用vite工具构建一个什么样的项目
特点不仅仅支持vue
在这里插入图片描述
3、选js或者ts
选项结果：
在这里插入图片描述
然后 根据提示 输入 cd vite-vue 以及npm install
在这里插入图片描述
安装完就可以正常使用 npm run dev ，npm build等命令了

怎么把以前cli脚手架的启动方式 迁移到vite的运行环境
首先要保证环境一致
两个项目中的 package.json文件 中的配置必须一致
不一致的话 直接复制黏贴就行
在这里插入图片描述
在这里插入图片描述
然后在黏贴的过的项目中，打开终端 运行 npm i ，把这些粘贴过来的配置安装一下

2、把原先项目中的src文件夹复制过来，替换掉vite项目中的src文件夹（vite项目中的src文件删除不要）

现在如果在vite项目中直接运行npm run dev 会报错
在这里插入图片描述
因为在vite项目中 @符号是不被支持的

解决方法：
不用@符号，直接用层级（./，…/等）
在这里插入图片描述
在这里插入图片描述
所有的引入都需要改

vite中，发现所有文件中的引入路由（路径）没有任何改变（转义等）
在这里插入图片描述
在这里插入图片描述
那它怎么识别vue文件是否是js文件或其他文件呢

看network中的响应头content-type
在这里插入图片描述
在这里插入图片描述
文件虽然是.vue结尾，但content-type是application/javascript，那它就会按照js的方式运行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
运行后路由与代码中所写的一摸一样，所以可以证明 运行时代码并没有打包

在生产环境 vite也需要打包
和原来的没有区别
vite只是在开发环境运行的快

vue2的项目要使用vite

步骤和vue3项目迁移到vite一样
先把package.json配置修改成一样，再npm i安装，再替换src
运行
报错
在这里插入图片描述
原因：
因为vite支持多中框架，但不管是vue还是react等，都需要在vite.config.js文件中 以插件 的形式引入
而vite中vue默认 使用的是plugin.vue，而plugin.vue 默认支持的vue3
在这里插入图片描述
plugin.vue默认支持 以vue3的插件方式 在vite下进行开发

所以要用vue2，就得看能不能把默认的vue3配置改成vue2的

如何使用：

1、npm install vite-plugin-vue2 - -dev

引入并使用：
在这里插入图片描述
复制到到 package.json中
在这里插入图片描述
然后把plugins配置移动到 defineConfig中
然后删除const ｛createVuePlugin｝这行代码
在这里插入图片描述
然后 npm run dev 即可
vite-plugin-vue2是专门让vite适配vue2项目的

vue-element中的 快速上手 中 有vue cli 和 vite的引入方法
vue cli：
在这里插入图片描述
vite：
在这里插入图片描述
以上都不是按需引入
按需引入需要修改webpack配置，并且要把vite以插件的形式引入
需要去vite的官网上看
在webpack中有的配置基本上都能在vite中找到相应的配置项
在这里插入图片描述

webpack项目支持vite的骚操作

wp2vite
wp2vite安装也很简单：

npm install -g wp2vite

值得一提的是，wp2vite已被vite官方收录：

差不少
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react PC端项目构建TS，[email protected]+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于[email protected]端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：https://react.nodejs.cn/reference/react/hooks antd：https://ant-design.antgroup.com/components/pagination-cn/ axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
react移动端项目构建TS，[email protected]+react-vant+vite+axios+redux+sass+ts
03-06
该架构已解决大部分坑，主要用于[email protected]移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 rreact：https://react.nodejs.cn/reference/react/hooks vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
vite配置@别名
Tan_PF的博客
02-05 310
vite配置@别名
vite-vue3项目使用@别名和自定义端口号以及解决跨域
最新发布
qq_65142821的博客
03-30 729
找到 在vite.config.ts里面配置server重启一下服务，看看是否生效。
react PC端项目构建，[email protected]+antd+vite+axios+redux+sass
03-07
该架构已解决大部分坑，主要用于[email protected]端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：https://react.nodejs.cn/reference/react/hooks antd：https://ant-design.antgroup.com/components/pagination-cn/ axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
react移动端项目构建，[email protected]+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于[email protected]移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：https://react.nodejs.cn/reference/react/hooks vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
vite 中使用 @ ，配置路径别名
热门推荐
潇似风的博客
12-08 1万+
vite 配置路由别名， 使用@
vite项目中使用@代表根路径
黎小小的博客
08-08 1517
解决：在 tsconfig.json的compilerOptions下 加上 baseUrl 和 paths 即可。找不到模块“path”或其相应的类型声明。
vite中配置@别名
~~
10-01 771
使用@代替src目录。
关于在vite项目下，使用@引入的提示和报错问题的解决
CHENC0518的博客
03-29 3695
4. 找到根目录下的vite.config.js做如下配置：（已经注释的为本来已经有的，未注释的则为你要添加的）5.此时可能会报path错误，只需下载@types/node即可。最后，重启项目，你会发现@可以用了，奇怪的知识又多一个。3.此时已经有@提示了，但是vite项目依旧报错。1.首先，需要在vscode中安装一个插件。//导入文件时是否携带文件扩展名。
在vite项目中使用@进行文件的引入
weixin_42069587的博客
03-02 1202
在vite项目中使用@进行文件的引入 vite.config.js jsconfig.json
vue3.x+vite[email protected] 路由使用demo
07-24
vue3.x+vite[email protected] 路由使用demo，可供学习使用，也可在此基础上写项目
vite中配置路径别名@
m0_70709621的博客
07-18 1651
vite中配置路径别名@
vite js 配置@路径
2301_77643651的博客
04-27 1371
3、看看有没有jsconfig.json文件，没有就新建一个，然后把代码粘贴进入，配置就完成了。1、先看看node_modules 里面有没有path 文件，没有的话安装一下。2、找到vite.config.js 文件。
SpringBoot中 application.yaml 无法使用@符号问题
a1513049385的博客
03-02 2129
问题：application.yaml文件读取不到pom.xml下的标签值，报 Caused by: org.yaml.snakeyaml.scanner.ScannerException: while scanning for the next token found character '@' that cannot start any token. (Do not use @ for indentation) in 'reader', line 7, column 13: acti...
vite配置别名@以及别名输入提示
小多的博客
10-26 1067
若还报错则可能是vite版本问题 改成。如果 path 报错，可以安装。
vite 资源定位符 @
qq_42389674的博客
05-27 750
统一资源定位符 在vite中，使用resolve alias find 使用路径的开头 replacement 对应的文件资源 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const path = require("path") // https://vitejs.dev/config/ export default defineConfig({ resolve: { ...
vite “@”路径选择配置
qq_41615727的博客
10-20 475
首先需要在配置文件vite.config.ts添加代码。然后再去tsconfig.json文件添加。
vite配置@别名，以及如何让vscode智能提示路经
weixin_59916662的博客
10-17 1万+
vite 配置路径别名@，以及如何让vscode智能提示路经
vite.config.js @
08-26
vite.config.js是Vite项目的配置文件，用于配置Vite的各项选项和行为。 当以命令方式运行Vite时，Vite会自动解析项目根目录下的vite.config.js文件。如果配置不全，可能会在打包上线时出现各种问题。 你可以在vite.config.js中定义各种选项，比如运行模式、插件配置、构建配置等等。具体的配置选项可以参考Vite官网提供的文档，其中包含了详细的共享选项和插件选项说明。 通过编辑vite.config.js文件，你可以根据项目的需求来进行定制化的配置，以满足你的开发和构建需求。请查阅相关文档，并根据你的实际需求进行相应的配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vite.config.js详细配置。](https://blog.csdn.net/weixin_46409887/article/details/128935767)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值