随着日积月累,代码量越来越多,vue单页面已经有了100+pages,30+vuecomponents,因此启动速度越来越慢。 2、vue-cli-service和vite启动速度对比 将vue-cli-service升级切换到vite之后启动速度得到了巨幅提升,下面是对比结果: 1.使用vue-cli-service serve启动: 平均耗时:15s 最大耗时:40s 最小耗时:10s image 2.使...
首先,需要卸载vue-cli相关的依赖,并安装Vite及其插件。 bash # 卸载vue-cli相关依赖 npm uninstall @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service sass-loader core-js @babel/core @babel/eslint-parser # 安装Vite及其插件 npm install @...
"@vue/cli-service": "^3.0.5", 新项目 "vite": "^3.0.0", "vue": "^3.2.37", 新建项目 重新建立一个项目,使用vite生成项目;然后添加所用的依赖 1、yarn create vite my-vue-app --template vue 添加axios、vue-router、vuex、vant、clipboard等; ...
在vue-cli中,根目录默认为public,index.html也在public目录中。 而vite则不是,这是官方文档的说明: 你可能已经注意到,在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该Vite 项目的入口文件。 另外,vue-cli中,是...
vue-cli和vite环境变量都可以采用.env文件去存储,但是在变量的命名方式上有很大差异。比如vue-cli是VUE_APP_前缀的环境变量,vite则是采用VITE_的变量前缀。 环境变量使用方面,vue-cli是采用process.env.xxx来使用;vite则是采用import.meta.env.xxx来使用。
vue-cli-service 中使用 vue.config.js 作为配置文件;而 vite 则默认会需要创建一个 vite.config.ts 来作为配置文件。基础的配置文件很简单: import{ defineConfig }from'vite'; exportdefaultdefineConfig({ plugins: [ // ... ], }) 创建该配置文件,之前的 vue.config.js 就不再使用了。
使用vue-cli4的项目,业务写多了之后开发运行和打包都慢了很多,为了提升开发体验以及更新团队技术框架,需要升级到更高级的脚手架上,两种方案:一是升级到vue-cli5,二是升级到最新的vite。 其中第一种方案升级简单,经过实验,打包的速度不升反慢,这可能和项目中的有依赖以及业务代码有关。 第二种方案升级vite,经过可...
1. 创建 Vite 项目 首先，我们需要创建一个新的 Vite 项目。可以使用以下命令进行创建：vite create my-new-project 这将创建一个新的 Vite 项目，并自动安装所有的依赖。2. 复制现有的 Vue CLI 代码 接下来，我们需要将现有的 Vue CLI 代码复制到新的 Vite 项目中。将所有的组件、路由、store 等文件复制到 ...
删除@vue/cli-service 依赖项,并替换为 vite ? Add vite dev dependency, v2.1.3 at the time of writing.png 代码语言:javascript 复制 npm un @vue/cli-service npm i vite-D 你也可以删除任何其他以@vue/cli-plugin-xxx开头的开发依赖项,因为它们将不再起作用,例如: ...
这个错误是因为在vue.config.js中的configureWebpack只能使用对象的配置方法(vue cli支持对象和函数两种方式) 2.2.2 Unrestricted file system access to "/src/components/editPwd 出现这个问题的原因是:vite默认配置中的extensions不包含.vue;解决方法: 1、在vue.config中加上extensions ...