试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快！也可能是我页面比较少，但是每次热更新，基本就是一存盘，浏览器就完成了变更，体验太好了。

换新脚手架，要把所有常用配置都验证一下，并且把原来webpack中的选项都做到在vite中等价实现。

包括：

* px2rem的解决方案，在postcss.config.js中配置，转化为vw单位，比rem方式要先进点。

* vant基础样式定义，在theme.less中。

* lodash及moment全局引入，在/index.html中直接用<script>标签引入的，在vue文件中和.js中直接可用，但是在.ts文件中，如果不做import，会有红色的错误波浪线出现，但不影响使用。

* import后缀为vue的组件时，必须带上vue后缀，但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面，热更新才会生效。

* 图片引入方式：

<img :src="require('@img/aaa.png')" />

background-image: url("@img/aaa.png");

* 静态资源在/public目录下，在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用，要改为import。写法方面，@import "~@/assets/less/_variable.less" vite中要去掉~写成：@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出，暂时没有配置方法屏蔽，折中办法，在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中，跟webpack一致。在所有代码中输出import.meta.env，可以看到环境变量的所有。具体看文档。

 

我本人对于vue3和ts不是很熟悉（学不动了），所以宁愿工作在vue2+js的环境中。在vite脚手架中，这两种方式是可以混用的。所以按自己合适的模式使用就行了。

 

放心去享受vite带来的快速体验吧！

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: