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