【Exception】Error: Dynamic require of “path“ is not supported

Talk is cheap, show me the code.

环境 | Environment

报错日志 | Error log

>npm run dev

> app1@0.0.0 dev
> vite


 ERROR  failed to load config from C:\code\frontend\app1\vite.config.js                22:01:42  


 ERROR  error when starting dev server:                                                                                    22:01:42  
Error: Dynamic require of "path" is not supported
    at file:///C:/code/frontend/app1/vite.config.js.timestamp-1700661702409-1225e92edb929.mjs:6:9    at file:///C:/code/frontend/app1/vite.config.js.timestamp-1700661702409-1225e92edb929.mjs:14:12
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
1
2
3
4
5
6
7
8
9
10
11
12
13

vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'

const path = require('path')

// 为了在index.html中使用环境变量
const getViteEnv = (mode, target) => {
  return loadEnv(mode, process.cwd())[target];
};

// https://vitejs.dev/config/
export default ({ mode }) =>
  defineConfig({
    plugins: [
      vue(),
      createHtmlPlugin({
        inject: {
          data: {
            //将环境变量 VITE_APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
            title: getViteEnv(mode, "VITE_APP_TITLE"),
          },
        },
      }),
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, "./src")
      }
    },
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

原因分析 | Analysis

1. VITE v5.0.0不支持require()

解决方案 | Solution

将const path = require('path')改为import path from 'path'

参考 | References

简书 - vite项目中出现的错误Error: Dynamic require of “path” is not supported