#VantUI 项目配置
预计阅读时间: 小于 1 分钟VantUI 相关设置
#安装插件
- 插件一：amfe-flexible：用于设置 rem 基准值
安装插件
1yarn add amfe-flexible --dev- 插件二：postcss-pxtorem：用于将单位转化为 rem
安装插件
1yarn add postcss-pxtorem --dev#vue-cli 中设置
- 导入插件
使用插件
1const autoprefixer = require("autoprefixer");
2const pxtorem = require("postcss-pxtorem");
3// gzip
4const CompressionWebpackPlugin = require("compression-webpack-plugin");- vue.config.js 中配置
项目配置
1module.exports = {
2 css: {
3 loaderOptions: {
4 // 根字体大小设置
5 postcss: {
6 plugins: [autoprefixer(), pxtorem({ rootValue: 37.5, propList: ["*"] })]
7 },
8 // less默认样式配置
9 less: {
10 javascriptEnabled: true,
11 modifyVars: {
12 blue: "#4B72E5",
13 "button-primary-background-color": "#4B72E5",
14 "button-primary-border-color": "#4B72E5",
15 "nav-bar-background-color": "#4B72E5",
16 "nav-bar-icon-color": "#FAFAFA",
17 "nav-bar-text-color": "#FAFAFA",
18 "nav-bar-title-text-color": "#FAFAFA",
19 "tabbar-item-active-color": "#4B72E5"
20 }
21 }
22 }
23 }
24};或者
项目配置
1module.exports = {
2 css: {
3 loaderOptions: {
4 // 根字体大小设置
5 postcss: {
6 plugins: [
7 autoprefixer({
8 overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"]
9 }),
10 pxtorem({
11 rootValue: 37.5,
12 propList: ["*"]
13 })
14 ]
15 },
16 // less默认样式配置
17 less: {
18 javascriptEnabled: true,
19 modifyVars: {
20 // vantUI 相关色值设置
21 blue: "#4B72E5"
22 }
23 }
24 }
25 }
26};- gzip 代码压缩（需要 Nginx 开启 gzip 压缩）
代码示例
1module.exports = {
2 publicPath: "/",
3 devServer: {
4 // 自动打开浏览器
5 open: true,
6 // 服务器地址
7 proxy: "地址"
8 },
9 css: {},
10 configureWebpack: config => {
11 // 为生产环境修改配置...
12 if (process.env.NODE_ENV === "production") {
13 config.plugins.push(
14 new CompressionWebpackPlugin({
15 algorithm: "gzip",
16 // 正在匹配需要压缩的文件后缀
17 test: /\.(js|css|svg|ttf|json|html)$/,
18 // 大于10kb的会压缩
19 threshold: 10240,
20 minRatio: 0.8
21 })
22 );
23 }
24 },
25 // 是否打包生成Map文件
26 productionSourceMap: false
27};- **babel.config.js **按需加载配置
代码示例
1module.exports = {
2 presets: ["@vue/cli-plugin-babel/preset"],
3 plugins: [
4 [
5 "import",
6 {
7 libraryName: "vant",
8 libraryDirectory: "es",
9 // style: true
10 style: name => `${name}/style/less`
11 },
12 "vant"
13 ]
14 ]
15};#清除 console.log 日志信息
- 安装插件：babel-plugin-transform-remove-console
安装插件
1yarn add babel-plugin-transform-remove-console --dev- 相关配置（在 babel.config.js 中配置）
引入插件
1// 引入插件
2const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
3// 生产环境移除console
4if (process.env.NODE_ENV === "production") {
5 plugins.push("transform-remove-console");
6}
7
8module.exports = {
9 plugins: plugins,
10 presets: ["@vue/cli-plugin-babel/preset"]
11};目 录