记一次vue2项目开发模式从wepack转vite的改造流程

之前我们通过html-webpack-plugin注入的模板数据，现在我们使用vite-plugin-html里的injectOptions.data注入，每个key对应html文件中的<%- key %>。
define：这里用来定义业务代码中要用到的环境变量，比如我们等会要用IS_VITE区分部分业务代码（登录跳转逻辑）
less配置注意去掉了lessOptions的外层
optimizeDeps：exclude对应前面的externals，include对应前面的transpileDependencies。
'~': resolve(NODE_PATH),'~@': resolve(NODE_PATH),：alias中多了这俩玩意儿，因为代码中存在一些样式文件是这样引入的：@import url('~@/styles/xxx.src.css')，所以需要额外再补充。
proxy的规则，vite中proxy是基于http-proxy封装的，它里面的选项可见：https://github.com/http-party/node-http-proxy#options。和之前`vue.config.js`中的写法差不多，但是`router`变成`target`，`pathRewrite`变成`rewrite function`。
babel：你可以看到我这没有再配置babel，因为vite自带了babel，包括对ts的处理，所以我们并不需要额外引入。

然后是babel.config.js，由于我们是vite环境，所以不能使用@vue/cli-plugin-babel/preset，我们直接基于环境变量IS_VITE区别即可。

另外别忘了在你的.eslintrc中将IS_VITE定义为全局变量

这么配置就完成了，然后来说一些兼容性的问题。

兼容性问题

require

虽然我们用了vite-plugin-require作为替代，但该插件并不是完全支持webpack require的写法，比如：

需要调整为：

另外如果传入一个变量是绝对不行的（包括webpack require），比如：

因为require.context实际上是创建一个执行上下文，执行时再去找，如果传入一个变量，压根找不到。

The arguments passed to require.context must be literals!

文件找错问题

之前有些不规范写法，将js命名和vue文件命名写成一样的，比如：

然后在B中引入时不带后缀：

这种是webpack可行但vite不行的操作。因为webpack底层做了额外操作用来试错，而vite讲究的是原生。

module.exports

业务代码中存在module.exports的导出方式，改成export default即可，webpack自身也支持这种写法。

public/index.html重命名

为啥要这么做，因为vite把index.html视作是源码，所以默认情况下会去找根文件夹里的index.html，整个服务器也是基于根目录。

当然，这不是不可以调整的。然而我们用了vite-plugin-html，这玩意儿bug还挺多，作者也没空改。。。。所以在经过一些列无意义调整后，还是采用重写public里的index.html和preview.html为_index.html以及_preview.html。

同时在根目录里新增index.html、preview.html以及login.html

import Vue from vue

前面说过项目中有俩vue，一个是node_modules里的，另一个是public/lib里通过script引入的。因为我们配置了externals，所以生产环境是使用lib下的，不过我发现在开发环境下，原来的配置也是用的lib下的，也就是node_modules里的vue压根没用上。

但是到了vite里，我发现它被导入了，也就是说vite先找的node_modules里的而不是script的。

因此原本代码中存在import Vue from 'vue'的写法就都需要去掉，为什么呢？因为lib_c也是要用到这个script版本的vue，然后往Vue.prototype里注入了一些内容。而业务代码中又有用到这玩意儿，所以如果不去掉就会导致找不到global vue prototype里被注入的内容。