无法加载 PostCSS 配置

Question

我从 Vue2 迁移到 vue3，从 cli 迁移到 vite（使用 Vuetify），然后收到此错误。

[plugin:vite:css] 无法加载 PostCSS 配置 (searchPath: ...): [Error] 加载 PostCSS 插件失败: ES 模块 C:\Users...\src\vue\node_modules\vuetify\ 的 require()不支持 lib\framework.mjs。相反，将 C:\Users...\src\vue\node_modules\vuetify\lib\framework.mjs 的 require 更改为所有 CommonJS 模块中都可用的动态 import() 。

router.js:1
无法加载资源：服务器响应状态为 500（内部服务器错误） App.vue:1
无法加载资源：服务器响应状态为 500（内部服务器错误） main.css： 1
无法加载资源：服务器响应状态为 500（内部服务器错误）

我尝试删除模块并重新安装它，还尝试添加 postcss.config.js 文件，但对我没有任何作用

包.json

  "versionMessage": "",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode development",
    "build-dev": "vue-cli-service build --mode development",
    "build-prod": "vue-cli-service build --mode production",
    "prep-deploy": "node prep_deployment.js",
    "lite": "lite-server",
    "dev": "vite",
    "build": "vite build",
    "test": "vite test",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  },
  "main": "background.js",
  "dependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/compat": "^3.1.0-0",
    "color-hash": "^1.0.3",
    "gantt-elastic": "^1.0.10",
    "humanize-duration": "^3.21.0",
    "lodash": "^4.17.21",
    "mathjs": "^7.5.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.31",
    "throttled-queue": "^1.0.7",
    "vue": "^3.1.0-0",
    "vue-cookies": "^1.5.13",
    "vue-google-charts": "^0.3.2",
    "vue-router": "^3.1.3",
    "vue-session": "^1.0.0",
    "vue-timeago": "^5.1.2",
    "vuedraggable": "^2.23.2",
    "vuetify": "^3.1.5",
    "vuetify-upload-button": "^2.0.2",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/compiler-sfc": "^3.1.0-0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^8.7.1",
    "lite-server": "^2.5.4",
    "mkdirp": "^1.0.3",
    "ncp": "^2.0.0",
    "rimraf": "^3.0.2",
    "sass": "^1.23.7",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.1",
    "vite": "^4.1.3",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "postcss": "^8.4.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off",
      "no-unused-vars": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vite.config.js

import { defineConfig } from 'vite'

const path = require("path");
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
          '@': require('path').resolve(__dirname, 'src')
        }
      },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
})```

Answer 1

对于任何遇到此问题的人：

这是最新版本的 vite 如何处理 ESM（Es 模块）的新问题。

CommonJS 文件需要显式命名为.cjs

将文件重命名为postcss.config.cjs和tailwind.config.cjs（如果您使用的是 tailwind）作为解决方法。

祝你好运， 来源