vue2 工程引入vite 问题记录

为什么要用vite

1. 基于浏览器原生esmodule, 开发预览时按需编译。
2. 使用esbuild, 构建速度快。

webpack与vit的多方面对比

打包过程的区别

• webpack: 从入口开始解析、逐级递归识别依赖，构建依赖图、将代码转换为ast，在ast上去做处理、将处理完的ast生成新的代码。

• vite: 当声明一个script标签类型为module时，浏览器就会向服务器发起一个GET请求、vite会拦截这个请求并对请求资源的路径进行重写，找到相应的文件返回、vite在整个过程中没有进行打包编译，只是起了一个静态服务器的作用。

构建依赖的区别

• webpack是使用node.js编写的。
• vite 使用esbuild进行依赖预构建。

vite 问题记录

问题1、在vite.config.js 里，最初使用如下。

  resolve: {
    alias: [
      { find: 'vue$', replacement: 'vue/dist/vue.esm.js' },
      { find: '@', replacement: resolve('src') },
      { find: 'common', replacement: resolve('src/common') },
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },

然后发现在view-design 库里，less 报错。提示无法识别 @import "common" 类似的引入方式，最终怀疑是 { find: '@', replacement: resolve('src') } 出问题。

改用如下alias：

  resolve: {
    alias: {
      '@': resolve('src'),
      '@common': resolve('src/common'),
      '~view-design': resolve('node_modules/view-design')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }

问题2，历史工程里，有人在.vue 里头使用jsx写。导致的vite 编译出错

The esbuild loader for this file is currently set to "js" but it must be set to "jsx" 

return tableBtns
  .filter(e => !e.hidden)
  .map(e => (
    <el-button type="text" size="small" onClick={e.click}>
      {e.name}
    </el-button>
  ));

通过新增 <script lang='jsx'> & npm install -D @vue/composition-api 依赖包。

问题3，iview 框架库字体404

在assets/style/variables.less文件中我们通过@import "~iview/src/styles/index.less"的方式引入了iview的样式文件，在iview/src/styles/index.less文件中又引入了字体文件，但引入路径是./fonts，所以vite认为是项目中的文件就加载了项目根目录下的fonts，但项目中并没有这个文件

方法1： 把字体fonts 整个目录放到 vite 根目录的 public 里。因为vite 默认会讲public 作为项目静态资源文件夹。

方法2: 更改变量路径

// 修复在vite中iview引入字体路径不不正确问题
@ionicons-font-path: "~view-design/src/styles/common/iconfont/fonts";

完成后最终效果：

启动速度 vite

webpack