Webpack to Vite

1. 安装并配置 Vite

1
$ yarn add vite -D

vite 默认没有对 vue2 的支持，我们需要先安装一个插件 vite-plugin-vue2

1
$ yarn add vite-plugin-vue2 -D

然后在根目录下新建 vite.config.js 文件，添加内容：

1
2
3
4
5
6
7
// vite.config.js
import { defineConfig } from 'vite';
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2';

export default defineConfig({
  plugins: [Vue2()],
});

在package.json中加入脚本

1
2
3
4
5
6
7
{
  "scripts": {
    "vite-dev": "vite",
    "vite-build": "vite build",
    "vite-preview": "vite preview"
  }
}

将 index.html 移动（or 复制）到根目录下，记得修改文件路径 <script type="module" src="/src/main.js"></script>

1
$ yarn vite-dev

先把项目跑起来再说！

2.问题及解决方案

解决引入时省略文件扩展名问题(.vue/.js)

例如：

1
2
3
import tsc from 'tsc.vue';
// 上面的写法可以，但是下面的会报错
import tsc from 'tsc';

可以通过以下设置来解决（并不建议这么做）：

1
2
3
4
5
6
// vite.config.js
{
  resolve: {
    extensions: ['.js', '.vue'];
  }
}

但这其实并不是什么 bug，而是Vite有意这样设计的，详见issue，说不定啥时候就不支持这样配置了。
所以最好还是老老实实把扩展名写全了吧。

设置别名 alias

1
2
3
4
5
6
7
8
// vite.config.js
{
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

包含多个别名的导入，如：@import '~@/styles/global.scss'，同时包含了别名~ 和@，
您可以添加别名配置 { find: /^~@/, replacement: path.resolve(__dirname, 'src') } 到 resolve.alias 配置中，并且把该项配置移到别名配置中的第一项。

参考: https://github.com/originjs/webpack-to-vite/blob/main/README-zh.md

xx is not defined.

项目中使用的环境变量报错 process is not defined.
vite.config.js 中添加：

1
2
3
4
5
6
7
{
  define: {
    'process.env': {
      // ...
    }
  }
}

报错 require is not defined.，安装插件 @originjs/vite-plugin-commonjs，如果还需要对 require.context 支持，安装插件 @originjs/vite-plugin-require-context

1
2
3
4
5
6
// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import ViteRequireContext from '@originjs/vite-plugin-require-context';
export default {
  plugins: [viteCommonjs(), ViteRequireContext()],
};

至此，白屏了半天的项目，终于出现画面了。
当然，不要高兴的太早，看控制台还是一片红，还有很多未知的问题等着去解决呢。

require 动态引入图片

如果你在模版中使用了 require 动态引入图片，
例如 <img :src="require('../assets/' + imgName)" />, 或许你又要看到 require is not defined. 的报错了，
所以还需要继续改造我们的代码，

因为之前已经安装过插件去支持require，并且我还打算跟Webpack进行兼容（开发环境用Vite，生产环境继续用Webpack），
所以在项目中采用了以下方法：

1
2
3
4
5
6
7
8
9
10
11
12
// 关于 require.context() 的使用可自行查阅资料
const images = require.context('@/assets/images');
const getImageUrl = key => {
  // key -> './image-name.png'
  if (!images.keys().includes(key)) {
    return;
  }
  return images(key);
};
// usage in template:
// <img :src="getImageUrl('./my-image.png')" />
// 可以在局部使用，也可以封装为全局方法

或者使用import.mate.url

3. 关于 build

做了一些兼容性调整，生产环境构建继续采用 webpack