Vue2项目使用vite构建开发环境

一、安装相关依赖

npm i -D vite vite-plugin-html vite-plugin-vue2 webpack-strip-block vite-plugin-antdv1-momentjs-resolver@1.1.0

二、新建vite.config.js

import {
  defineConfig,
  loadEnv
} from 'vite'
import {
  createVuePlugin
} from 'vite-plugin-vue2'
const path = require('path')
import { createHtmlPlugin } from 'vite-plugin-html'
const defaultSettings = require('./src/defaultSettings')
import AntdMomentResolver from 'vite-plugin-antdv1-momentjs-resolver'

// 这两个是设置模块预构建，不过我设置了没啥用，懂行的老哥解答一下
// 我现在的做法时直接配置optimizeDeps.include
import PkgConfig from 'vite-plugin-package-config'
import OptimizationPersist from 'vite-plugin-optimize-persist'

export default defineConfig(({
  mode
}) => {
  // 加载环境变量，因为 vite 中不会加载以 VUE 开头的，我们得自己指定下
  const envPrefix = ['VUE']
  const env = loadEnv(mode, process.cwd(), envPrefix)

  const define = {
    'process.env.NODE_ENV': '"development"',
    'process.env.BASE_URL': '"/"',
    'process.env.VITE': true
  }

  for (const [key, value] of Object.entries(env)) {
    define[`process.env.${key}`] = `"${value}"`
  }

  return {
    define,
    server: {
      open: true,
      port: 3030,
      host: 'localhost'
    },
    resolve: {
      alias: [
        {
          find: '@/',
          replacement: '/src/'
        }
      ],
      extensions: ['.js', '.vue', '.json', '.jsx']
    },
    css: {
      devSourcemap: true,
      // 样式预加载设置
      preprocessorOptions: {
        less: {
          modifyVars: {
            /* less 变量覆盖，用于自定义 ant design 主题 */
            'primary-color': '#db3046'
          },
          javascriptEnabled: true
        },
        // 给 sass-loader 传递选项
        scss: {
          // @/ 是 src/ 的别名
          additionalData: `
          @import "@styles/helper/mixin.scss";
          @import "@styles/helper/variables.scss";
        `
        }
      }
    },
    plugins: [
      AntdMomentResolver(),
      createVuePlugin({
        jsx: true
      }),
      createHtmlPlugin({
        minify: true,
        entry: 'src/main.js',
        template: 'index.html',
        inject: {
          data: {
            // 这是我们 index.html 用到的环境变量
            ...env
          }
        }
      })
      PkgConfig(),
      OptimizationPersist()
    ]
  }
})

三、常见问题

1、批量引入文件

require.context() 在vite下对应的是 import.meta.globEager()，可以根据环境变量决定用哪种
注意，webpack不能正确处理import.meta，
所以用到了webpack-strip-block loader，使用webpack构建时会把注释内的代码删除
用法：
/* develblock:start */
import.meta.globEager()/* develblock:end */

2、引入资源

require 需要改为 import

3、jsx

单页面组件使用了jsx语法，需要设置script标签的lang="jsx"
js文件使用了jsx语法，则要把扩展名改为jsx

4、ant-design-vue1.x，内部的moment引用报错

原因是引入moment的写法不符合规范，需要安装插件修改源码
使用的是vite-plugin-antdv1-momentjs-resolver
这里有个坑，需要下载版本1.1.0的，最新的1.1.1执行会报错

  5、index.html

建议index.html放在项目根目录，写个脚本，启动vite时，删除public文件夹下的index.html；
启动webpack时，复制根目录的index.html到public文件夹

四、配置启动命令

// package.json

"scripts": {
    ...
    "vite": "vite"
}

五、参考文章

如何在 webpack 项目中使用 vite 加速（兼容模式） - 掘金 (juejin.cn)