Vue CLI生产构建报错求助：Unexpected space及未捕获Promise异常

我看到你在构建Vue生产环境项目时遇到了这个CSS处理的空格错误，而且已经排查了明显的空格问题和async函数无catch块的情况却没找到根源，下面给你几个针对性的排查方向，应该能帮你定位问题：

1. 深挖CSS选择器里的"隐形"空格问题 #

虽然你已经检查过空格，但postcss-selector-parser对选择器语法的校验非常严格，一些容易忽略的空格场景可能触发错误：

• 属性选择器里的非法空格：比如input[type= text]（等号和属性值之间的空格不合法，正确写法是input[type=text]或input[type="text"]）
• 混入全角空格（中文空格）：这种空格肉眼很难分辨，建议打开编辑器的"显示空白字符"功能，检查所有CSS/SCSS/LESS文件的选择器部分，看看是否有全角空格、制表符与空格混合的情况
• 嵌套选择器的缩进问题：比如在SCSS里如果换行后的缩进用了特殊空格，也可能被解析为非法字符

2. 排查PostCSS插件的配置或兼容性 #

Vue项目通常会依赖autoprefixer、cssnano这类PostCSS插件，插件配置不当或者版本不兼容都可能导致解析错误：

• 你可以先临时清空PostCSS插件列表来测试：新建或修改项目根目录的postcss.config.js，内容改成：

  module.exports = {
    plugins: []
  }
  

  如果此时构建成功，说明是某个插件的问题，再逐个添加插件并重新构建，找到问题插件后要么调整它的配置，要么更新插件版本

3. 检查第三方CSS依赖的合法性 #

如果项目中引入了第三方UI库、组件库的CSS文件，这些文件里可能存在不符合规范的选择器写法，触发了postcss的报错：

• 尝试暂时移除所有第三方CSS文件，只保留你自己编写的CSS代码，重新构建看是否还报错。如果没问题，再逐个引入第三方CSS，定位到有问题的文件后，要么手动修复该文件的选择器，要么用postcss-sanitize这类插件来自动修复语法问题

4. 更新PostCSS相关依赖包 #

旧版本的postcss、postcss-selector-parser可能存在已知的语法解析bug，更新这些依赖大概率能解决问题：

# npm用户
npm update postcss postcss-selector-parser

# yarn用户
yarn upgrade postcss postcss-selector-parser

5. 检查Vue CLI版本（如果用Vue CLI构建） #

如果你是通过Vue CLI搭建的项目，旧版本的@vue/cli-service可能和新版PostCSS依赖存在兼容性问题，尝试更新CLI服务：

npm update @vue/cli-service
# 或者
yarn upgrade @vue/cli-service

另外，你提到的async function without a catch block警告虽然和当前报错没有直接关联，但也建议处理一下——找到项目中所有的async函数，给它们加上try/catch块，或者用.catch()来处理Promise的异常，避免后续出现其他潜在问题。

内容的提问来源于stack exchange，提问作者Mateusz Kawka