这里记录一个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