postcss style.css -r viewportWidth=750; 如何获取到 viewportWidth=750 这个参数呢
场景需要
公司之前的项目使用的是*.less样式文件,然后在浏览器直接引入;
使用less.js文件在浏览器中解析运行;如何在浏览器中使用less
1
2
| <link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js"></script>
|
我选择使用打包编译的方式对less文件进行编译,然后使用postcss压缩
把之前项目中 3000 行代码200kb使用cssnano进行压缩,使其60kb;
方法一
1
2
3
4
5
6
7
8
| const arguments = process.argv.reduce((a, b, index) => {
if (/^[^=]*=[^=]*$/.test(b)) {
const arr = b.split('=');
a[arr[0]] = arr[1];
}
return a;
}, {});
console.log(arguments);
|
这样我就可以获取到所有命令行中的参数了, 在后面的代码中我可以这样去使用;
1
2
3
4
|
minPixelValue: arguments.minPixelValue || 2;
viewportWidth: arguments.viewportWidth || 1024;
|
方法二
在 Vue 项目中，使用 jenkins 构建部署，需要修改 publicPath 和 vue-router.base
1
2
3
4
5
6
7
8
9
10
11
12
| module.exports.npmConfigArgv = {};
let idx = 2;
const {
cooked,
cooked: { length }
} = JSON.parse(process.env.npm_config_argv);
while ((idx += 2) <= length) {
module.exports.npmConfigArgv[cooked[idx - 2]] = cooked[idx - 1];
}
process.env.VUE_APP_DEPLOY_PATH = module.exports.npmConfigArgv['--deploypath'];
|
在项目中就可以使用环境变量了;
你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。
在 Vue-cli 官方文档中提到了这一点 在客户端侧代码中使用环境变量
1
2
3
4
5
6
7
8
9
| # vue.config.js
module.exports = {
+ publicPath: isPro ? process.env.VUE_APP_DEPLOY_PATH : "/",
devServer: {
# router.js
const router = new VueRouter({
mode: "hash",
+ base: isPro ? process.env.VUE_APP_DEPLOY_PATH : "/",
|
参考文档