VantUI 移动端项目配置

vantUI 相关设置

安装插件

• 插件一：amfe-flexible

yarn add amfe-flexible --dev

• 插件二：postcss-pxtorem

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"
				}
			}
		}
	}
};

• 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"]
};