Vue-cli 4.x 配置pug,less,rem布局等

新项目配置高效率的开发环境

很久没有关注Vue生态圈，发现Vue-cli已经4.x版本了，相比3.0版本又有了一些优化，对应的环境配置也有点不同了。

感兴趣可关注我的公众号 ruanjianxiaoyu 相互探讨学习，分享更多有趣好玩的东西。记得后台留言哦！

开始

安装时的问题

官方文档上有说明，在安装最新的脚手架之前最好先卸载旧版本的vue/cli。

npm uninstall vue-cli -g

yarn global remove vue-cli

一切按照官方文档 操作之后会搭建基本开发环境。 但是我们想要在这基础上继续配置就需要了解其原理了。

下面是我的移动端项目的配置 pug + less + flexible 等，简单记录一下

配置pug

安装 yarn add -D pug pug-plain-loader 即可
在template模板中就可以快乐的使用 lang="pug"了

配置less

安装 yarn add -D less less-loader
在style标签中 可以使用 <style lang="less"> 了

配置全局自动引入 common.less

在我们写css的时候，每次都需要再less里引入 全局写的mixin 。每次写一遍往往会觉得很烦。所以能不能自动引用全局公共文件呢。

1. 安装 style-resources-loade

yarn add -D style-resources-loade

2. 在项目根目录新增 vue.config.js文件
3. 添加一下代码即可解决上面的问题

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/assets/variable.less")] // 这里配置需要引入的文件
    });
}

module.exports= {
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
}

配置px2rem

1. 安装 yarn add -D postcss-plugin-px2rem
2. 在vue.config.js文件中增加配置

module.exports= {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          px2rem({
            rootValue: 75, // 根节点的,根据UI搞来计算。我的是 750*1334 ，则这里天75. 其他可不变
            unitPrecision: 5,
            propWhiteList: [],
            propBlackList: [],
            exclude: /node_modules/,
            selectorBlackList: [],
            ignoreIdentifier: false,
            replace: true,
            mediaQuery: false,
            minPixelValue: 3
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
}

配置代理等

在vue.conifg.js中增加配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          px2rem({
            rootValue: 75, // 根节点的
            unitPrecision: 5,
            propWhiteList: [],
            propBlackList: [],
            exclude: /node_modules/,
            selectorBlackList: [],
            ignoreIdentifier: false,
            replace: true,
            mediaQuery: false,
            minPixelValue: 3
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
 devServer: {
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "http://192.168.92.49:8000",
        changeOrigin: true
      },
      "/web": {
        target: "https://uin-develop.ergengtv.com",
        changeOrigin: true,
        pathRewrite: { "^/web": "/api/web" }
      },
      "/ergengtv": {
        target: "https://api.ergengtv.com",
        changeOrigin: true,
        pathRewrite: { "^/ergengtv": "" }
      }
    }
  }
};

结语

前端技术时刻在进步，时刻需要保持学习进步的心。 如有什么问题欢迎留言。感兴趣可关注公众号 ruanjianxiaoyu 相互探讨学习。大家一起进步鸭！