Nuxt3 的生命周期和钩子函数（九）

// plugins/viteExtend.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:extend 钩子
  nuxtApp.hook('vite:extend', (viteConfig, { isServer, isClient }) => {
    // 在这里可以扩展或修改 Vite 的配置
    if (isClient) {
      // 修改客户端的 Vite 配置
      viteConfig.plugins.push(...additionalClientPlugins);
    } else if (isServer) {
      // 修改服务端的 Vite 配置
      viteConfig.plugins.push(...additionalServerPlugins);
    }

    // 例如，添加一个自定义的插件
    viteConfig.plugins.push({
      name: 'custom-plugin',
      apply: 'build', // 插件应用阶段
      enforce: 'post', // 插件执行顺序
      transform(code, id) {
        // 对代码进行转换
        return code.replace(/console\.log\(/g, 'console.error(');
      }
    });

    // 注意：这里只是示例代码，实际使用时需要根据实际情况来修改
  });
});

// plugins/viteExtendConfig.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:extendConfig 钩子
  nuxtApp.hook('vite:extendConfig', (config, { mode }) => {
    // 在这里可以扩展或修改 Vite 的配置
    // 例如，根据不同的环境变量添加不同的配置
    if (mode === 'production') {
      // 修改生产环境的 Vite 配置
      config.plugins.push(...additionalProductionPlugins);
    } else {
      // 修改开发环境的 Vite 配置
      config.plugins.push(...additionalDevelopmentPlugins);
    }

    // 修改 Vite 的基本配置
    config.base = '/custom_base_path/';

    // 添加一个自定义的别名
    config.resolve.alias['@custom'] = '/path/to/custom';

    // 注意：这里只是示例代码，实际使用时需要根据实际情况来修改
  });
});

// plugins/viteConfigResolved.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:configResolved 钩子
  nuxtApp.hook('vite:configResolved', (config) => {
    // 在这里可以读取到最终的 Vite 配置
    console.log('Resolved Vite config:', config);

    // 例如，你可以根据配置做一些逻辑处理
    if (config.plugins.some(plugin => plugin.name === 'some-plugin-name')) {
      // 执行一些操作，比如启用某个功能
    }

    // 注意：这里只是示例代码，实际使用时需要根据实际情况来处理
  });
});

// plugins/viteServerCreated.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:serverCreated 钩子
  nuxtApp.hook('vite:serverCreated', (server, env) => {
    // 在这里可以访问到 Vite 服务器实例
    console.log('Vite server created:', server);

    // 例如，你可以添加一个自定义的中间件
    server.middlewares.use((req, res, next) => {
      console.log('Custom middleware executed:', req.url);
      next();
    });

    // 或者根据环境变量做一些逻辑处理
    if (env.NODE_ENV === 'development') {
      // 开发环境下的特殊处理
    }

    // 注意：这里只是示例代码，实际使用时需要根据实际情况来处理
  });
});

// plugins/viteCompiled.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:compiled 钩子
  nuxtApp.hook('vite:compiled', () => {
    // 在这里可以执行编译完成后的自定义操作
    console.log('Vite compilation completed');

    // 例如，你可以记录编译时间
    const endTime = Date.now();
    const startTime = nuxtApp.payload.compilationStartTime || endTime;
    const duration = endTime - startTime;
    console.log(`Compilation took ${duration} ms`);

    // 或者执行其他与编译相关的任务
    // 注意：这里只是示例代码，实际使用时需要根据实际情况来处理
  });
});

// plugins/webpackConfig.js

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('webpack:config', (webpackConfigs) => {
    // 在这里可以修改 webpack 配置
    webpackConfigs.forEach((config) => {
      // 例如，添加一个新的 loader
      config.module.rules.push({
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      });
    });
  });
});