在ios8 版本上的h5对flex的支持不太好,需要有兼容的写法。

vue-cli自带了postCss autoprefixer 进行兼容处理,配置如下

在vue-loader.config.js中开启 usePostCSS: true

module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction,
usePostCSS:true // 开启 usePostCSS
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

解决插件冲突

配置后发现在开发环境时,正常添加环境,而生产环境打包的并没有添加兼容的前缀。

原因: vue-cli构建项目时 在webpack.prd.conf.js中使用了插件, optimize-css-assets-webpack-plugin,和postCss发生冲突。

// webpack.prd.conf.js
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),

解决:

1. 直接注释掉

//  new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
// ? { safe: true, map: { inline: false } }
// : { safe: true }
// }),
带来的问题就是 css没有进行压缩处理 2. 对这个的插件的参数进行配置 new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
// ? { safe: true, map: { inline: false } }
// : { safe: true }
// 对这个的插件的参数进行配置
cssProcessorOptions: {
safe: true,
// 禁用此插件的autoprefixer功能,因为要使通过postcss来使用
autoprefixer: false,
discardComments: {
removeAll: true
}
},
canPrint: true
}),

vue打包添加样式兼容前缀的更多相关文章

  1. JS控制CSS3,添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  2. vue打包完样式冲突

    在页面的<style> 后,加上scoped, 例: scoped是实现样式的私有化,使样式不容易被覆盖,不容易被修改,只对当前页面有效

  3. css自动添加浏览器兼容前缀 autoprefixer设置

    Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...

  4. Visual自动添加CSS兼容前缀

    安装方法 打开vs code 的 扩展 ---> 搜索 Autoprefixer,并安装. 使用方法 打开css文件,按F1,选择 Autoprefix CSS 这条命令 没执行命令之前: 执行 ...

  5. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

  6. vue 组件中添加样式不生效

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...

  7. Vue给元素添加样式

    Vue中使用样式 绑定css 数组 <style> .red{ color:red } .thin{ font-size:18px } </style> <h1 :cla ...

  8. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  9. css3打包后自动追加前缀插件:autoprefixer

    用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postcss ...

随机推荐

  1. rac重新启动遭遇ORA-01078、ORA-01565、ORA-17503、ORA-12547

    今天測试环境server重新启动导致一个节点集群无法重新启动,遭遇ORA-12547错误.详细例如以下: server重新启动后,rac1集群无法启动,rac2正常启动: [root@rac1 ~]# ...

  2. OpenCV学习笔记09--通过cvPtr2D或指针算法绘制图形

    练习:创建一个1000*1000的三通道图像,将其元素所有置0.以(200,50)和(400,200)为顶点绘制一个绿色平面 我们能够用两种方法来实现这一功能,一个是使用cvPtr2D,可是因为使用了 ...

  3. CodeForces B. The least round way(dp)

    题目链接:http://codeforces.com/problemset/problem/2/B B. The least round way time limit per test 5 secon ...

  4. Swift的闭包,枚举,类和结构体

    闭包(Closures) 使用过其它语言的应该对代码块并不陌生,Swift中的闭包与C,OC中的Block相似. 表示自包括的函数代码块.能够在代码中传递和使用. 而且能够捕获和存储上下文的变量以及常 ...

  5. Dojo入门篇

    Dojo是一个JavaScript实现的开源DHTML工具包,Dojo最初的目标是解决开发HTML应用程序中遇到的一些长期存在的问题.然而如今Dojo已经成为了开发RIA应用程序的利器. Dojo让W ...

  6. 在VPS上用Outline Manager 建立*** 增强版服务器

    在VPS上用Outline Manager 建立*** 增强版服务器 原文 https://free.com.tw/google-outline/ Outline 是Google Jigsaw的一款开 ...

  7. ISheet ICell

    /// <summary> /// Gets the first row on the sheet /// </summary> /// <value>the nu ...

  8. js阻止默认事件与js阻止事件冒泡

    e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...

  9. 让透明div里的文字不透明

    最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...

  10. react-native flatlist setState修改数据视图不刷新解决方案

    给flatlist添加属性:handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems) ...