Mock de Vue3 résout le problème de if (!require.cache) { ^ ReferenceError : require n'est pas défini

1. Description du problème :

Tout d'abord, l'erreur signalée est la suivante :

ReferenceError: require is not defined

Le chinois c'est :

ReferenceError:require 未被定义

Deuxièmement, le problème est décrit comme suit :
Le demose présente sous Vue3+Vite+TSla forme de . Après avoir été pnpm install -D vite-plugin-mock mockjsinstallé mock, vite.config.tsintroduit mocket configuré dans , une erreur est signalée lors de l'exécution du projet :require 未被定义

// La configuration dans vite.config.tsestmock :

// 主要的代码为:import { viteMockServe } from 'vite-plugin-mock',以及 viteMockServe({ localEnabled: command === 'serve',}) 的配置;

import {
    
     UserConfigExport, ConfigEnv } from 'vite'
import {
    
     viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({
     
      command })=> {
    
    
  return {
    
    
    plugins: [
      vue(),
      viteMockServe({
    
    
        localEnabled: command === 'serve',
      }),
    ],
  }
}

Troisièmement, la page d'erreur s'affiche comme suit :

Insérer la description de l'image ici

2. Analyse du problème :

S'il manque node_modules/vite-plugin-mock/dist/index.mjsdans , le problème doit être résolu après avoir été introduit ;index.mjsrequire

3. Résolution de problèmes :

Tout d'abord, ouvrez le fichier node_modules/vite-plugin-mock/dist/index.mjsdansindex.mjs :

A. Le code ajouté est :

import {
    
     createRequire } from 'module';
const require = createRequire(import.meta.url);

B. index.mjsAffichage de la page après avoir ajouté le code :

Insérer la description de l'image ici

Deuxièmement, si vous exécutez la commande pour exécuter le projet à ce moment-là, il s'exécutera avec succès :

Insérer la description de l'image ici

4. Résumé :

Tout d’abord, s’il y a quelque chose qui ne va pas ou qui n’est pas approprié, donnez-moi quelques conseils et échanges !
Deuxièmement, si vous transmettez ou citez le contenu de cet article, veuillez indiquer l'adresse de ce blog ( 直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300 . La création n'est pas facile, mais elle doit être faite et chérie !
Troisièmement, si vous êtes intéressé, vous pouvez accorder plus d'attention à cette colonne (colonne essentielle Vue (Vue2+Vue3) pour les interviews) ( 直接点击下面 url 跳转) : https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014. 3001.5482

Acho que você gosta

Origin blog.csdn.net/weixin_43405300/article/details/135116431
Recomendado
Clasificación