ElementUI自定义主题报错“primordials is not defined”最佳解决方案

 

写这篇文章之前，我已经查过百度搜索 primordials is not defined 结果前五条，均是通过降低 Node.js 版本或者多 Node.js 环境共存的方案，保证编译环境为 Node.js v10.x ，这里我并不想这样做，其实我是已经解决了问题才去搜索百度的，因为我不希望让你不幸看到了重复而无用的解决方案，而浪费你的时间。

但是，最近经过谷歌找到一篇文章，文章出处点击这里。

原文讲述的是在苹果系统下的开发

macOS Catalina 10.15.7

现在根据原文转换成window10系统下的操作，先说一下我项目的版本：

Node.js v14.15.4
@vue/cli 4.5.11
element-ui 2.15.0

在当前操作环境下是没有问题的，重点是不需要降级 Node.js，也不需要搞多个 Node.js 环境，你大概只需要对安装的包稍作调整即可。

非官方正确步骤

我的 Vue.js 项目依赖包管理器是 npm ，如果你是 yarn ，对应调整。

请安装如下配置 ElementUI 主题相关的包：

npm i element-themex element-theme-chalk -D

这就完啦？是的。。。其它的就跟官方一样了，我顺便写一下。

通过以下命令创建完整的 element-variables.scss 文件：

node_modules/.bin/et -i

这时会出现，'node_modules' 不是内部或外部命令，也不是可运行的程序或批处理文件。

原因是在windows系统中要用反斜杠

修改后的，在window系统下命令：

.\node_modules\.bin\et -i

按照官方文档，这一步就会报错，不过按照我的步骤应该没有问题了。接着打开新创建，尝试性修改 $--color-primary 成其他颜色，例如：

$--color-primary: red !default;

接着进行编译，执行如下命令：

.\node_modules\.bin\et

就会自动生成大量的文件，存放在项目根目录的 theme 下，一般来说项目都有配置按需引入，此时接着修改 babel.config.js 文件：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: '~theme',
      },
    ],
  ],
}

重新启动项目，可以看到整体主题色的主色变成了红色，这就算大功告成了。

补充说明

• 在执行主题配置文件的修改后编译，我这里会一直报错，其实没什么影响，错误信息如下：

⠼ build element theme
  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

如果你在意，可以试试修改 .browserslistrc ，我恰巧看到有人发了个 fix ，不过被关了，有兴趣可以自己试试，详情阅读：fix: node.js 12 error primordials is not defined，当然我觉得也许你也可以通过修改编译配置中的 browsers 属性解决，我没实验，仅供参考~

• 另外通过工具生成的theme目录可以考虑在.gitignore中忽略，他只是在编译过程中用到，当然如果在服务端需要编译的话，就不要忽略了。

最后

好了关于这个解决方案我当然也是通过查找官方 Issues，然后整理总结出来的，参考：

• ReferenceError: primordials is not defined - when trying to generate theme variables file

当然这个哥们在哪找到的- -我就不再细究了。其实我尝试的找了下这个包，在npmjs上面发现，指向的还是官方主题配置仓。所以大概是官方某些内部群流出的临时方案吧。