vue-cli3.0 配置 以及 postcss-pxtorem的使用

这里记录一个vue-cli3.0 配置的移动端 以及postcss-pxtorem 的使用

yarn add postcss-pxtorem -D复制代码

1、首先利用 vue-cli3.0 创建的项目会自带一个 postcss.config.js

module.exports = {  plugins: {    autoprefixer: { // 添加浏览器前缀      browsers: ["Android >= 4.0", "iOS >= 7"]    },    "postcss-pxtorem": {      rootValue: 75, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      // unitPrecision: 5, // 允许REM单位增长的十进制数      propList: ["*"],      // selectorBlackList: [""], //（数组）要忽略的选择器并保留为px。      minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题    }  }};复制代码

2、建立一个 vue.config.js 这也是官方推荐的，可以 修改一些默认配置

我发现利用vue打包，背景图片不会引用线上cdn 这里可以修改 背景打包也走cdn 

let externals = {}; // 不打包的一些插件 可以引线上cdnif (process.env.NODE_ENV === "production") {  externals = {    vue: "Vue",    axios: "axios",    "mint-ui": "MINT",    "babel-runtime/core-js/promise": "Promise"  };}module.exports = {  publicPath: process.env.VUE_APP_REALEASE === "production" ? "./" : "./",  productionSourceMap: false,  devServer: {    open: true,    proxy: {      "/api": {        target: "http://118.89.22.28:9502/", // 接口地址代理跨域        changeOrigin: true      }    }  },  configureWebpack: {    externals  },  chainWebpack: config => {    config.plugin("html").tap(args => {      args[0].env = process.env.NODE_ENV;      args[0].template = "public/index.html";      if (process.env.NODE_ENV === "production") {        args[0].minify = {          minifyCSS: true,          minifyJS: true,          removeComments: true,          collapseWhitespace: true        };      }      return args;    });    config.module.rule("images")      .test(/\.(jpg|png|gif)$/)      .use("url-loader")      .loader("url-loader")      .options({        limit: 10,        publicPath:          process.env.VUE_APP_REALEASE === "production"            ? "https://oss.xx.com/img"            : "../image/", // 这里背景图片也使用cdn        outputPath: "image",        name: "[name].[hash].[ext]",      })      .end();  }};复制代码

3、index.html 页面加入 控制rem转换的前提 要加meta

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

<script>      (function (win, doc) {        if (!win.addEventListener) return;        var html = document.documentElement;        function setFont() {            var html = document.documentElement;            html.style.fontSize = html.clientWidth / 10  + "px";        }        setFont();        setTimeout(function () {            setFont();        }, 300);        doc.addEventListener('DOMContentLoaded', setFont, false);        win.addEventListener('resize', setFont, false);        win.addEventListener('load', setFont, false);    })(window, document);    </script>复制代码

转载于:https://juejin.im/post/5d0b7a76f265da1baf7cf2ea