uni-app cli创建的项目，如果安装了postcss，小程序预览和真机调试时会报错

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app cli创建的项目，如果安装了postcss，小程序预览和真机调试时会报错

开发环境 版本号 项目创建方式
Windows Win10 22H2 CLI 
产品分类：uniapp/小程序/微信

## 示例代码：
```json
"devDependencies": {  
    "@dcloudio/types": "^3.4.8",  
    "@dcloudio/uni-automator": "3.0.0-4020920240930001",  
    "@dcloudio/uni-cli-shared": "3.0.0-4020920240930001",  
    "@dcloudio/uni-stacktracey": "3.0.0-4020920240930001",  
    "@dcloudio/vite-plugin-uni": "3.0.0-4020920240930001",  
    "@vue/runtime-core": "^3.4.21",  
    "@vue/tsconfig": "^0.1.3",  
    "autoprefixer": "^10.4.20",  
    "postcss": "^8.4.47",  
    "tailwindcss": "^3.4.14",  
    "typescript": "^4.9.4",  
    "vite": "5.2.8",  
    "vue-tsc": "^1.0.24"  
}

操作步骤：

  • 创建项目： npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
  • 安装依赖： pnpm i
  • 安装postcss： pnpm install -D tailwindcss postcss autoprefixer
  • 运行项目： pnpm dev:mp-weixin
  • 使用小程序开发者工具打开，并点击预览
  • 出现错误：message：预览 Error: Error: Cannot find module ‘nanoid/non-secure’

预期结果：

在安装postcss依赖的情况下，可以在小程序开发者工具上预览和真机调试

实际结果：

只要安装postcss依赖，预览和真机调试会报错 message：预览 Error: Error: Cannot find module ‘nanoid/non-secure’ Require stack:

  • D:\Programming\WorkSpace\HBuilderProjects\mp-vue3-test\node_modules\postcss\lib\input.js
  • D:\Programming\WorkSpace\HBuilderProjects\mp-vue3-test\node_modules\postcss\lib\fromJSON.js
  • D:\Programming\WorkSpace\HBuilderProjects\mp-vue3-test\node_modules\postcss\lib\postcss.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\plugins\base\wxss.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\plugins\index.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\initPlugin.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\summer\worker.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\original\workerThread\task\index.js
  • C:\Users\wuchu\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\WeappCode\package.nw\js\common\miniprogram-builder\modules\corecompiler\original\workerThread\worker.js appid: openid: ideVersion: 1.06.2410222 osType: win32-x64 time: 2024-10-28 15:04:55

bug描述：

cli创建vue3项目，安装postcss依赖，然后运行到小程序开发者工具。 开发和调试都正常，但使用预览和真机调试就会报错。 把postcss依赖卸载掉预览就恢复正常了。 postcss的版本在代码示例里


Harmonyos Next教程
1 回复

在处理使用 uni-app CLI 创建的项目并安装了 postcss 后出现的小程序预览和真机调试报错问题时，通常可能是由于 postcss 配置或插件与 uni-app 框架的兼容性问题所导致。下面我将提供一个示例代码和配置，帮助你检查和调整 postcss 的配置，以尽量避免这类问题。

1. 确保 postcss 配置正确

首先，确保你的 postcss 配置文件（通常是 postcss.config.js）中的插件和设置与 uni-app 兼容。以下是一个基础的 postcss.config.js 配置示例，它仅包含了一些常见的 postcss 插件，如 autoprefixer：

module.exports = {
  plugins: {
    autoprefixer: {}, // 自动添加浏览器前缀
    // 添加其他插件时，请确保它们与uni-app兼容
    // 比如：cssnano: {} 用于压缩CSS，但需谨慎使用，避免影响样式表现
  },
};

2. 条件编译处理

uni-app 支持条件编译，这允许你为不同平台编写特定的样式。确保你没有在 postcss 处理过程中破坏这些条件编译指令。例如，使用 postcss-preset-env 时，应配置它正确处理条件编译注释：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      // 确保postcss-preset-env不会移除或改变条件编译注释
      stage: 0,
      features: {
        'custom-properties': {
          preserve: true, // 保留CSS变量，不进行转换
        },
        // 其他配置...
      },
    }),
    // 其他插件...
  ],
};

3. 检查 uni-app 项目配置

确保 uni-app 的项目配置文件（如 pages.json, manifest.json）中没有与 postcss 处理冲突的设置。特别是样式相关的配置，如全局样式文件的引入路径。

4. 清理和重建项目

有时候，简单的清理和重建项目可以解决缓存或配置未生效的问题：

# 清理项目依赖
rm -rf node_modules/
rm package-lock.json # 或 yarn.lock

# 重新安装依赖
npm install # 或 yarn install

# 重新构建项目
npm run dev:mp-weixin # 根据你的目标平台调整命令

通过上述步骤，你应该能够定位并解决因 postcss 配置不当导致的小程序预览和真机调试报错问题。如果问题依旧存在，建议详细检查报错信息，并在 uni-app 社区或相关开发者论坛寻求更具体的帮助。

回到顶部