[vite] 开发用vite,打包用webpack--解决别名路径不同的问题

vue3.0 + ts + vite + webpack 实战项目最强套装

当下使用vue-cli4生成一份项目工程已经很简单了。这里不过多介绍。使用vue3.0 + ts 最新技术的同时， 公司业务项目复杂，还离不开webpack的打包。我们知道，vue-cli4脚手架为我们配置好了一些默认设置。那么在此基础上如何使用vite呢？

安装好vite@1.0.0-rc.13依赖包后，目前最大的问题是路径问题。 我们知道，vite配置文件vite.config.ts中:

alias: {
  '/@/': pathResolve('src')
}

b别名必须以 '/' 开头和结尾。这就和现有的配置冲突了。如果所有引用文件的路径全都改成以'/'开头的（使用相对路径的除外），

import HelloWorld from '/@/components/HelloWorld.vue'

那么webpack这边冲突。而且vscode编译器跳转识别会错误。vite最新的rc分支给出了新的api---resolvers。resolvers相当于alias的增强版，可以自定义规则。

/**
 * Resolvers to map dev server public path requests to/from file system paths,
 * and optionally map module ids to public path requests.
 */
resolvers?: Resolver[];

vite.config.ts 文件：

const viteConfig: UserConfig = {
 // something
 alias: {
  '/@/': pathResolve('src')
},
 resolvers: [resolveAlias]
}

resolveAlias 实现：

import type { Resolver } from 'vite';

export const resolveAlias: Resolver = {
  alias: id => {
    if (id.startsWith('@/')) id = '/' + id
    return id
  }
}

这样vite和webpack就可以愉快的玩耍了，笔芯。 此外，vite还提供了transforms， plugins等扩展配置。实现更多的个性化需求。甚至还提供了针对 vite dev 服务器中的中间件配置---configureServer。所以，vite对开发人员在配置方便还是很友好的。 至此，终于实现了开发环境使用vite，体验更快的编译速度。生产使用webpack打包。可以更合理的拆包，更好的实现模块化等。

如有不妥，欢迎指正。