vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
Vite 官方中文文档——https://cn.vitejs.dev/
vite-plugin-vue2包——https://www.npmjs.com/package/vite-plugin-vue2
随着vite2的发布,vite越来越独立于vue存在,同时借助于vite-plugin-vue2插件,大量vue2的工程也终于可以搭上vite开发的快车。
操作流程如下:
1、vue-cli生成vue2工程
vue create vite-vue2-demo
// ...
cd vite-vue2-demo
npm i
src同层级,生成的vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";export default defineConfig({plugins: [createVuePlugin(),],resolve: {alias: [{find: '@',replacement: '/src',},],},
});
更多配置可到 https://vitejs.dev/config/#conditional-config 查看。
2、 安装vite和vue2插件
npm i -D vite vite-plugin-vue2
3、调整index.html目录结构,官方说明
index.html
/public -> 根目录下,与package.json同级
4、index.html引入main.js
<body>// ...<div id="app"></div><script type="module" src="/src/main.js"></script>
</body>
5、router文件修改base
const router = new VueRouter({mode: "history",// base: process.env.BASE_URL,base: import.meta.env.BASE_URL,routes,
});
6、package.json修改serve命令
"script": {"serve": "vite",// ...
}
npm i
大功告成,执行命令
npm run serve
官网参考:https://cn.vitejs.dev/guide/#command-line-interface
参考demo:https://github.com/underfin/vite-plugin-vue2
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件相关推荐
- Vue的新型前端构建工具Vite怎么用
本文小编为大家详细介绍"Vue的新型前端构建工具Vite怎么用",内容详细,步骤清晰,细节处理妥当,希望这篇"Vue的新型前端构建工具Vite怎么用"文章能帮助 ...
- 前端打包工具webpack和Vite
我们见证了 webpack.Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验. 但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器,文件修改后的效 ...
- 前端三大构建工具 Webpack、Vite、Rollup 优劣势及原理分析
在刚刚结束的 VueConf2021 中,除了 Vue 3.0 以外,另外一个亮点就是下一代构建工具 Vite 了. 在尤雨溪分享的[ Vue 3 生态进展和计划]的演讲中,尤大神还特意提到 Vite ...
- vite 前端构建工具
目录 一.vite 简介 二.vite 语法纪要 三.用 vite 创建项目 1.用 vite 创建一个 react 项目 2.用 vite 创建一个 vue3 项目 四.vite 和 webpack ...
- java owc_使用微软OWC中做为联机分析系统前端展示工具
使用微软OWC中做为联机分析系统前端展示工具 我们在开发联机分析系统时,经常要在B/S结构下开发,也就是说:联机分析系统的前端展示工具需要能嵌入到浏览器中使用.当然你可以自己开发,但是,在一般的情况下 ...
- vite(一)前端打包工具发展史
现如今前端打包工具最火的无疑是vite!但是vite也不是凭空产生的,而是踩着前人肩膀发展起来的.所以在学习vite之前,有必要了解前端打包工具发展史. 前端打包工具发展史分为哪些阶段? 每一次前端打 ...
- 三大前端构建工具横评,谁是性能之王!
点击上方"蓝色字体",选择"设为星标" 做积极向上的前端人! Vite一经发布就吸引了很多人的关注,NPM下载量一路攀升: 而在Vite之前,还有Snowpac ...
- npm run buil构建后页面白屏_从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- 前端构建工具gulpjs的使用介绍及技巧 (转)
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
最新文章
- 计算机服务修复,修复服务注册缺失或已损坏错误在win10中的方法
- 有关输出图形的代码,我觉得好难啊,好蒙啊。
- python与h5结合实例_使用h5py合并所有h5文件
- JSONObject转换JSON--将Date转换为指定格式
- 使用JAVA来获得本日,本周,本月,本年的时间信息
- 资深系统管理员给Linux/Unix新人们的建议
- 从select函数谈及系统调用原理
- 史上最全的thymleaf标签
- SQL Server常用数据类型
- U盘不能格式化,磁盘管理里显示只读
- java 合并mp3
- 老徐WEB:js入门学习 - javascript运算符
- webpack-theme-color-replacer自定义element-ui主题
- node scripts/install.js 安装失败解决办法
- CES Asia展华为秀肌肉,布局智能互联生态
- 怎么将自己的头像p到特定的背景图_怎么使用PS抠图,把扣出来的图片P到另张图上...
- 自学Python:按照日期自动分类照片
- 一个段子来解释数据挖掘
- html、js、css3制作一款辉光管时钟
- Linux 在线安装MYSQL