Viteproject require Syntax Compatibility Problem Solving require is not defined

viteLe projet ne soutient pasrequireRésolution de problèmes de grammaire require is not defined

ViteUtilisation par défautes6Standard import Méthode d'importation pour,Non pris en chargerequireIntroduction.Par défautViteLa façon dont ils ont été introduitshttps://vitejs.cn/guide/assets.html

Mais dans l'usage quotidienVue3+Ts+ViteDans le projet de construction,Certaines sont plus anciennesDans le plug - in tripartitePar défautrequireIntroduction(webpackBuild peut utiliser),Ça va arriver.requireProblèmes de compatibilité des erreurs de méthode require is not defined .

1. requireEtimportDifférences d'importation

	Année	Origine	Utiliser
require/exports	2009	CommonJS	const lodash = require(‘lodash’);
import/export	2015	ECMAScript2015（ES6）	import lodash from ‘lodash’;

2. Solutions

Vite Écologie communautaire des entrepôts https://github.com/vitejs/awesome-viteL'un d'eux

Plug - in vite-plugin-require-transform. Conversion automatique du plug - inimport xxx from ‘’;Méthodes Introduction

Installation

yarn add -D vite-plugin-require-transform

Ou

npm i vite-plugin-require-transform --save-dev

Utiliser

// vite.config.tsConfiguration

import requireTransform from 'vite-plugin-require-transform';

  plugins: [
    // ...
    requireTransform({
    
      fileRegex:/.ts$|.tsx$|.vue$/
	// fileRegex:/.js$|.jsx$|.vue$/
    }),
  ]

Après additionnpm run buildEmballez npm run preview Aucune exception à l'aperçu .