引言：Vue3和Vite是当前前端开发中非常热门的技术组合，它们提供了快速、高效的开发环境和强大的生态系统。本篇博客将介绍如何使用Vue3和Vite构建一个基础案例，并整合饿了么UI、路由、组件和常用插件，让您快速上手并搭建一个功能强大的Web应用。步骤1：创建项目首先，我们需要安装Vite工具来创建一个基于Vue3的项目。打开命令行界面，执行以下命令：npminitvite@latestmy-app----templatevue该命令将使用Vite提供的Vue模板创建一个新的项目，并将其命名为my-app。然后进入项目目录：cdmy-app使用以下命令安装项目依赖并启动开发服务器：npmin
创建vue3+vite+ts项目时，报错Therequestedmodule‘vue’doesnotprovideanexportnamed‘computed’；node版本问题，Vite需要Node.js版本14.18+，16+；升级node版本步骤：先查看node的版本：node-v；安装n：npminstall-gnsudonlatest//升级到最新版本sudonstable//升级到稳定版本sudonxx.xx//升级到具体版本号我采用的是升级到14.18.2sudon14.18.2n切换之后的node默认装在/usr/local/bin/node，先用whichnode检查一下当前
有些功能只能在https环境下进行测试，如何在线下运行时进行https调试呢？开启vite.config中的https，然后引入并使用一个自动签名的包即可。方式1：npmi @vitejs/plugin-basic-ssl-D//vite.config.jsimportbasicSslfrom'@vitejs/plugin-basic-ssl'exportdefault{server:{https:true},plugins:[basicSsl()]}启动项目弹出一个⚠️页面，会提示不信任的证书。方式2：下面我们使用警告模式:vite-plugin-mkcertnpmi vite-plugin
文章目录前言一、遇到的问题二、解决办法1.明确方向2.解决方法①方案一②方案二③方案三三、原因及相关原理1.为什么需要require方法2.为什么require方法失效了3.newURL()为什么就可以4.Vite插件介绍总结扩展阅读前言Vite是一种轻量快速的前端构建工具，能够显著提升前端开发体验，而且官方已经发布v4版本，相对比较稳定。在把VueCli搭建的项目迁移到Vite的过程中遇到了个问题，下面分享一下问题及解决办法。一、遇到的问题在script标签里面引入的图片资源没生效，然后一看控制台，报错显示requireisnotdefined…二、解决办法1.明确方向经过查找Vite相关文
目录1.main.js 导入storeimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom"./router";import"./router/permission";importstorefrom"./store";constapp=createApp(App)app.use(router)app.use(store)app.mount('#app') 2.store/index.js 导出storeimport{createPinia}from"pinia/dist/pinia";conststore=crea
参考文章：vue项目获取本机局域网IP地址（vue.config.js版本)在Vite中，没有vue.config.js文件，而是使用vite.config.js（或vite.config.ts，如果项目使用TypeScript）来配置项目；1.获取IP需要借助 os 模块，需要先安装依赖：npminstallos2.其次在vite.config.ts中引用模块importosfrom'os'; 3.接着，添加一个获取本机内网IP的函数functiongetNetworkIp(){letneedHost='';try{constnetwork=os.networkInterfaces();fo
vue3+vite4项目，配置代理实现本地开发跨域问题非同源请求，也就是协议(protocol)、端口(port)、主机(host)其中一项不相同的时候，这时候就会产生跨域vite的proxy代理和vue-cli的proxy大致相同，需要在vite.config.js文件中配置（打包配置也在此）代理配置在server中，可以上vite官网服务器选项查看server.proxy代码示例：开发服务器选项–server.proxy需要注意：使用了代理之后，axios的base路径需要改成代理路径，比如ok直接贴配置代码：import{fileURLToPath,URL}from'node:url'i
项目代码同步至码云weiz-vue3-template关于tsconfig的配置字段可查看其他文档，如typeScripttsconfig配置详解tsconfig.json文件修改如下:{"compilerOptions":{"target":"ESNext",//将代码编译为最新版本的JS"useDefineForClassFields":true,"module":"ESNext",//使用ESModule格式打包编译后的文件"lib":["ESNext","DOM","DOM.Iterable"],//引入ES最新特性和DOM接口的类型定义"skipLibCheck":true,//跳过
项目代码同步至码云weiz-vue3-template关于vite的详细配置可查看vite官方文档，本文简单介绍vite的常用配置。初始内容项目初建后，vite.config.ts的默认内容如下：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],})配置别名1.安装@types/nodenpmi@types/node-D2.修改vite.config.tsimport{defin
解决npm报错Error:EEXIST:filealreadyexists,mkdir"文件路径"，yarncreatevite-app报文件名、目录名或卷标语法不正确第一个问题出现原因解决办法第二个问题出现原因解决引用文章第一个问题出现原因我这里出现错误是因为在配置npm命令目录与npm全局安装位置时目录创建失败，但是在执行yarnconfigsetglobal-folder与yarnconfigsetcache-folder命令之后在本地的".yarnrc"文件中"global-folder"属性被写入，之后会卡在Error:EEXIST:filealreadyexists,mkdir"文
