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 = {}; // 不打包的一些插件 可以引线上cdn
if (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>