使用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 问题    }  }};复制代码

推奨vue.config.jsの公式の確立である、あなたはデフォルトの設定の一部を変更することができます2、

私はまた、CDNを行くあなたが背景パッケージを変更することができVUEパッケージの使用は、背景画像は、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ページは、メタレムを追加するために、変換の制御に追加しました

<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で再現