VantUI移动端相关配置

🛠 vantUI 相关设置

📣 前言

前期开发微信公众号内嵌H5项目，最初是单独的网页，每次都是跳来跳去用户体验很不好。在用户登录信息处理方面也存在一些弊端，后续领导提出使用内嵌一个H5（web）端的项目来逐步替换原有的h5页面，以增强用户使用体验。
经过研讨，最终决定采用 vue + vantUI 来进行开发，参考官方文档进行了相应的配置，因为要适配不同的手机设备，故需要结合UI框架来进行统一的设置，以便于后期的开发和维护工作。vantUI的使用可以参考官方文档，下述是一些简单的配置，目的是做笔记，便于后续开发。

🔔 安装插件

插件一：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"]
};

🏆 总结

本项目的前期主要是个人独立开发，笔记前一条之所以增加一条移除生产环境console.log 相关信息，主要是后期项目由同事接管,打印了很多console做调试，发布时又不想去注释，就找了一个折中的办法，在发布生产环境时通过第三方插件来移除console相关的信息。