随着日积月累,代码量越来越多,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和vite环境变量都可以采用.env文件去存储,但是在变量的命名方式上有很大差异。比如vue-cli是VUE_APP_前缀的环境变量,vite则是采用VITE_的变量前缀。 环境变量使用方面,vue-cli是采用process.env.xxx来使用;vite则是采用import.meta.env.xxx来使用。 解决方案 require依赖引入方式 处理required引入的方式,可以...
最后,验证一下引入vite后的效果。 在vue-cli的命令里添加--report参数,能够查看构建时间:"serve": "vue-cli-service serve --report", vite构建完成后,默认会有时间显示。 下面给出对比图。 vue-cli构建时间: vite构建时间: 可以看出来提升还是很大的。使用vite构建,相比vue-cli,时间大约缩短为原先的10倍。
使用vue-cli4的项目,业务写多了之后开发运行和打包都慢了很多,为了提升开发体验以及更新团队技术框架,需要升级到更高级的脚手架上,两种方案:一是升级到vue-cli5,二是升级到最新的vite。 其中第一种方案升级简单,经过实验,打包的速度不升反慢,这可能和项目中的有依赖以及业务代码有关。 第二种方案升级vite,经过可...
vue-cli-service 中使用 vue.config.js 作为配置文件;而 vite 则默认会需要创建一个 vite.config.ts 来作为配置文件。基础的配置文件很简单: import{ defineConfig }from'vite'; exportdefaultdefineConfig({ plugins: [ // ... ], }) 创建该配置文件,之前的 vue.config.js 就不再使用了。
"^1.0.14","chai": "^4.1.2","sass": "1.76","vite": "^4.5.3","vite-plugin-cdn-import": "^1.0.1","vue-template-compiler": "^2.6.10","vue-video-player": "^5.0.2"},"lint-staged": {"*.js": ["vue-cli-service lint","git add"],"*.vue": ["vue-cli-service lint","...
这个错误是因为在vue.config.js中的configureWebpack只能使用对象的配置方法(vue cli支持对象和函数两种方式) 2.2.2 Unrestricted file system access to "/src/components/editPwd 出现这个问题的原因是:vite默认配置中的extensions不包含.vue;解决方法: 1、在vue.config中加上extensions ...
vite-plugin-eslint vite-plugin-checker 这里出现了一些第三方类型报错,可以用patch-package解决。 alias 回到刚才那个alias失效的问题,这下就容易多了。 // vue.config.ts import type { ProjectOptions } from '@vue/cli-service'; // ... import packageJson from './package.json'; ...