Vant UI 项目配置

安装插件

插件一：amfe-flexible：用于设置 rem 基准值

安装

yarn add amfe-flexible --dev

插件二：postcss-pxtorem：用于将单位转化为 rem

安装

yarn add postcss-pxtorem --dev

vue-cli 中设置

导入插件

使用插件

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
// gzip
const CompressionWebpackPlugin = require("compression-webpack-plugin");

vue.config.js 中配置

项目配置

module.exports = {
    css: {
        loaderOptions: {
            // 根字体大小设置
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({ rootValue: 37.5, propList: ["*"] }),
                ],
            },
            // less默认样式配置
            less: {
                javascriptEnabled: true,
                modifyVars: {
                    blue: "#4B72E5",
                    "button-primary-background-color": "#4B72E5",
                    "button-primary-border-color": "#4B72E5",
                    "nav-bar-background-color": "#4B72E5",
                    "nav-bar-icon-color": "#FAFAFA",
                    "nav-bar-text-color": "#FAFAFA",
                    "nav-bar-title-text-color": "#FAFAFA",
                    "tabbar-item-active-color": "#4B72E5",
                },
            },
        },
    },
};

或者

项目配置

module.exports = {
    css: {
        loaderOptions: {
            // 根字体大小设置
            postcss: {
                plugins: [
                    autoprefixer({
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8",
                        ],
                    }),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ["*"],
                    }),
                ],
            },
            // less默认样式配置
            less: {
                javascriptEnabled: true,
                modifyVars: {
                    // vantUI 相关色值设置
                    blue: "#4B72E5",
                },
            },
        },
    },
};

gzip 代码压缩（需要 Nginx 开启 gzip 压缩）

代码示例

module.exports = {
    publicPath: "/",
    devServer: {
        // 自动打开浏览器
        open: true,
        // 服务器地址
        proxy: "地址",
    },
    css: {},
    configureWebpack: (config) => {
        // 为生产环境修改配置...
        if (process.env.NODE_ENV === "production") {
            config.plugins.push(
                new CompressionWebpackPlugin({
                    algorithm: "gzip",
                    // 正在匹配需要压缩的文件后缀
                    test: /\.(js|css|svg|ttf|json|html)$/,
                    // 大于10kb的会压缩
                    threshold: 10240,
                    minRatio: 0.8,
                })
            );
        }
    },
    // 是否打包生成Map文件
    productionSourceMap: false,
};

**babel.config.js **按需加载配置

代码示例

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    plugins: [
        [
            "import",
            {
                libraryName: "vant",
                libraryDirectory: "es",
                // style: true
                style: (name) => `${name}/style/less`,
            },
            "vant",
        ],
    ],
};

清除 console.log 日志信息

安装插件：babel-plugin-transform-remove-console

安装

yarn add babel-plugin-transform-remove-console --dev

相关配置（在 babel.config.js 中配置）

引入插件

// 引入插件
const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
// 生产环境移除console
if (process.env.NODE_ENV === "production") {
    plugins.push("transform-remove-console");
}

module.exports = {
    plugins: plugins,
    presets: ["@vue/cli-plugin-babel/preset"],
};

#Vant UI 项目配置

#安装插件

#vue-cli 中设置

#清除 console.log 日志信息

Vant UI 项目配置

安装插件

vue-cli 中设置

清除 console.log 日志信息