vue vant定制主题

vue-cli 4.x

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: (name) => `${name}/style/less`
    }, 'vant']
  ]
}

如果发现更改不起作用,尝试下把node_modules目录下的.cache目录删掉

vue.config.js less-loader 6.x

const path = require('path')
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        appendData: () => {
          return fs.readFileSync(
            path.resolve(__dirname, "./src/style/theme.less")
          ).toString();
        }
      }
    }
  }
}

less-loader的modifyVars选项已经在6.x版本删掉了

vue.config.js less-loader 5.x

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          'text-color': '#111',
          'border-color': '#eee',
          // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
          hack: `true; @import "your-less-file-path.less";`
        }
      }
    }
  }
}

参考

https://youzan.github.io/vant/#/zh-CN/theme

https://github.com/webpack-contrib/less-loader/issues/303

vue项目配置gzip压缩

为什么要配置gzip呢?

因为快啊,以 elementUI 为例,657KB大小压缩过后为191KB

有什么缺点?

服务器压缩一遍,客户端解压一遍,消耗一定性能

我们可以在打包的时候将js或一些静态文件再打包成.js.gz的格式,方便nginx等工具可以不用压缩直接发送压缩好的文件到客户端

怎么做?

以vue-cli的vue.config.js为例

module.exports = {
  chainWebpack(config) {
    config
      .when(process.env.NODE_ENV === 'production',
        config => {
          config
            .plugin('CompressionWebpackPlugin')
            .use('compression-webpack-plugin', [
              {
                filename: '[path].gz[query]',
                // 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
                algorithm: 'gzip',
                // 算法,默认'gzip'
                test: /\.(js|css)$/,
                // 所有匹配该正则的资源都会被处理。默认值是全部资源。
                // 这里只匹配了js、css文件
                threshold: 10240,
                // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                minRatio: 0.8
                // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
              }
            ])
            .end()
        })
  }
}

nginx配置

gzip on;
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

完成后如何查看是否有效呢,先重启nginx,然后随手点个js文件看看, etag 标签不带w就是有效

为GIT添加代理

虽然说github没给屏蔽,但是速度也太慢了,电信环境20k一秒速度令人抓狂

环境:win10

路径:C:\Users\用户名\.ssh

新建config文件

Host github.com
ProxyCommand connect -S 127.0.0.1:8848 %h %p # -S为socks
HostName %h
Port 22
User git
IdentityFile  ~/.ssh/id_rsa 
IdentitiesOnly yes