vite-plugin-vue2-compatible v0.4.1

vite-plugin-vue2-compatible

An vite plugin for compatible @vue/cli + vue2 template

📢 notes

At this stage, it is only recommended to use in the development stage

command

• yarn vite or npm run vite

package.json

• Add a vite script into package.json

  {
    "scripts": "vite"
  }

vite.config.ts

import path from 'path'
import { defineConfig } from 'vite'
// 必选 * vite 支持 vue2 官方插件
import { createVuePlugin } from 'vite-plugin-vue2'
// 可选 - 兼容 CommonJs 写法
import { vitePluginCommonjs } from 'vite-plugin-commonjs'
// 可选 - 兼容 webpack 中 require.contex
import viteRequireContext from '@originjs/vite-plugin-require-context'
import {
  // 必选 * 读取 public/index.html
  template,
  // 可选 - 兼容 import('@page/' + path)
  dynamicImport,
  // 可选 - 支持 .vue 单文件 options 中写 JSX 
  renderJsx,
  utils,
} from '@hb/vue2vite'
import pkg from './package.json'

export default defineConfig({
  plugins: [
    /**
     * @Repository https://github.com/underfin/vite-plugin-vue2
     */
    createVuePlugin({
      jsx: true,
      jsxOptions: {
        compositionAPI: true,
      },
    }),
    /**
     * 处理 webpack 项目中 require 写法
     */
    vitePluginCommonjs(),
    /**
     * 处理 webpack 项目中 require.context 写法
     */
    viteRequireContext(),
    /**
     * 默认使用 public/index.html 模板
     */
    template({
      // 告诉 vite 的入口文件 index.html 加载哪个 js；既 webpack 配置中的 entry
      entry: '/src/main.js',
      // 兼容 html-webpack-plugin 中的编译注入
      // !!!! 这里根据 public/index.html 中需要的数据注入 !!!!
      templateDate: {
        BASE_URL: '/',
        htmlWebpackPlugin: {
          options: {
            title: pkg.name,
          },
        },
      },
    }),
    /**
     * 兼容 import('@xxxx') 写法别名
     */
    dynamicImport(),
    /**
     * 支持在 render 选项中写 jsx
     */
    renderJsx(),
  ],
  resolve: {
    alias: [
      { find: '@', replacement: path.join(__dirname, 'src') },
      { find: /* ~/ *//^~(?=\/)/, replacement: path.join(__dirname, 'node_modules') },
      { find: /* ~ *//^~(?!\/)/, replacement: path.join(__dirname, 'node_modules/') },
    ],
    // 同 webpack 中的 extensions
    extensions: utils.DEFAULT_EXTENSIONS,
  },
  define: {
    // 同 webpack.DefinePlugin
    'process.env': process.env,
  }
})