Vue cli@3 折腾指北

Vue cli@3 挺方便, 但有些需求配置起来有些麻烦

在前端使用自定义的环境变量

vue cli 3 默认会设置 process.env.NODE_ENV / process.env.BASE_URL = <vue.config.js>.baseUrl

以及支持 VUE_APP_ 开头的环境变量, 但是组里的项目都是使用 process.env.BUILD 来判断

解决办法: 使用 vue-cli-plugin-expose-env

根据 postcss-loader 文档 https://github.com/postcss/postcss-loader#config

设置 config.path 即可, 对应 vue.config.js 如下

1
2
3
4
5
6
7
8
9
10
11
12
// vue.config.js
{
css: {
loaderOptions: {
postcss: {
config: {
path: __dirname,
},
},
},
},
}

这样link的依赖也会使用当前目录下的 postcss.config.js 配置文件