> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Vant UI 项目配置

[**VantUI**](https://vant-contrib.gitee.io/vant/#/zh-CN/) 相关设置

## 安装插件

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

```bash title="安装"
yarn add amfe-flexible --dev
```

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

```bash title="安装"
yarn add postcss-pxtorem --dev
```

## vue-cli 中设置

- 导入插件

```javascript title="使用插件"
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
// gzip
const CompressionWebpackPlugin = require("compression-webpack-plugin");
```

- **vue.config.js** 中配置

```javascript title="项目配置"
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",
                },
            },
        },
    },
};
```

**或者**

```javascript title="项目配置"
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** 压缩）

```jsx title="代码示例"
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 \*\*按需加载配置

```javascript title="代码示例"
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**

```bash title="安装"
yarn add babel-plugin-transform-remove-console --dev
```

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

```javascript title="引入插件"
// 引入插件
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"],
};
```