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