写这篇文章之前,我已经查过百度搜索 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 themeReplace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist configcan 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#readmehttps://twitter.com/browserslistReplace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist configcan 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#readmehttps://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上面发现,指向的还是官方主题配置仓。所以大概是官方某些内部群流出的临时方案吧。