TypechoJoeTheme

Dcr163的博客

统计

VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax)

2022-05-08
/
0 评论
/
273 阅读
/
正在检测是否收录...
05/08

VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax)

先安装 postcss,直接 npm install postcss --save-dev

安装 postcss-px-to-viewport 这里,使用github上的版本,因为可以指定目录或文件才进行转换

// 需要使用include属性:
npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
// 不需要使用include属性:
npm install postcss-px-to-viewport --save-dev

npm安装报错情况

...
npm ERR! error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054
npm ERR! fatal: expected flush after ref listing
...

可以尝试用下面的两个设置解决

git config --global http.sslverify 'false'
git config --global url.'https://'.insteadOf git://

安装github报错

PS E:\YzWork\> npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
npm ERR! Error while executing:
npm ERR! e:\Program Files\Git\cmd\git.EXE ls-remote -h -t https://github.com/evrone/postcss-px-to-viewport.git
npm ERR!
npm ERR! fatal: remote error:
npm ERR!   The unauthenticated git protocol on port 9418 is no longer supported.
npm ERR! Please see https://github.blog/2021-09-01-improving-git-protocol-security-github/ for more information.
npm ERR!
npm ERR! exited with error code: 128

可以用下面的npm包来代替,支持 include

npm install postcss-px-to-viewport-update --save-dev

在项目中配置信息

普通vue配置

​ 在根目录下建js文件 postcss.config.js,官方的地址说明:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

​ 给出个建议配置:

const pxToViewport = require('postcss-px-to-viewport')
module.exports = {
    plugins: [
        pxToViewport({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度,即小数点位数
            propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
            selectorBlackList: ['vant','wrap'], // 指定不转换为视窗单位的类名,
            minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
            include: [/dcr163/], // 设置需要使用的文件,指定文件或目录在这里配置,官方的正则方式不生效,只支持单个文件名
            landscape: false // 是否处理横屏情况
          })
    ]
};
本项目配置的文件如下

​ 在根目录的vue.config.js文件中新增配置,下面是排除node_modules目录和只转换带dcr163关键字的文件或目录

const path = require(`path`);
const webpack_modulename = require("./plugins/webpack-modulename");
const resolve = dir => path.join(__dirname, dir);
const serverAddr = require("./apiserver.config.js");
const pxToViewport = require('postcss-px-to-viewport')
module.exports = {
    chainWebpack: config => {
        config.plugins.delete('prefetch');
        config.resolve.alias.set(`@`, resolve(`src`));
    },
    css: {
        loaderOptions: { // 向 CSS 相关的 loader 传递选项
            less: {
                javascriptEnabled: true
            },
            postcss: {
                // 这里的选项会传递给 postcss-loader
                plugins: [
                    new pxToViewport({
                        unitToConvert: "px",
                        viewportWidth: 750,
                        unitPrecision: 6,
                        propList: ["*"],
                        viewportUnit: "vw",
                        fontViewportUnit: "vw",
                        selectorBlackList: ['van','wrap'],
                        minPixelValue: 1,
                        mediaQuery: true,
                        exclude: [/node_modelues/],
                        include:[/dcr163/],
                        landscape: false
                    })
                ]
            }
        }
    },
    devServer: {
        disableHostCheck: true,
        // 设置代理
        proxy: {
            "/frontapi": {
                target: serverAddr.serverAddr, // 域名
                ws: false, // 是否启用websockets
                changOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    "^/frontapi/": "/"
                }
            },
            "/core/": {
                target: serverAddr.serverAddr, // 域名
                ws: false, // 是否启用websockets
                changOrigin: true //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            },
            "/tmpdata/": {
                target: serverAddr.serverAddr, // 域名
                ws: false, // 是否启用websockets
                changOrigin: true //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            },
            "/comdata": {
                target: serverAddr.serverAddr, // 域名
                ws: false, // 是否启用websockets
                changOrigin: true //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            },
            "/sysdata": {
                target: serverAddr.serverAddr, // 域名
                ws: false, // 是否启用websockets
                changOrigin: true //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            //config.devtool = 'source-map';
            config.devtool = ''; //禁用SourceMap
            // config.plugins.push(new webpack_modulename());
            // config.output.filename = "js/[name].js";
            // config.output.chunkFilename = "js/[id].js";
        } else {
            // 为开发环境修改配置...
        }
    },
    publicPath: process.env.NODE_ENV === 'production' ? '/shop/front/' : '/'
};

其中新增的是下面两处位置

const pxToViewport = require('postcss-px-to-viewport')
postcss: {
    // 这里的选项会传递给 postcss-loader
    plugins: [
        new pxToViewport({
            unitToConvert: "px",
            viewportWidth: 750,
            unitPrecision: 6,
            propList: ["*"],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: ['van','wrap'],
            minPixelValue: 1,
            mediaQuery: true,
            exclude: [/node_modelues/],
            include:[/dcr163/],
            landscape: false
        })
    ]
}

VUEpostcss
朗读
赞(0)
版权属于:

Dcr163的博客

本文链接:

https://dcr163.cn/642.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. admin
    2021-08-15

    {!{data:image/webp;base64,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}!}

标签云