vue自动添加浏览器兼容前后缀操作


Posted in Javascript onAugust 13, 2020

1.安装loader

安装postcss-loader 和 autoprefixer

下载:

cnpm install postcss-loader autoprefixer --save-dev

在webpack.config.js里面设置以下代码

vue自动添加浏览器兼容前后缀操作

test:/\.css$/,
use: ['style-loader','css-loader',{
  loader: "postcss-loader",
  options:{
    plugins:[
      require("autoprefixer")({
        browsers: [
          'ie >= 8',
          'Firefox >= 20',
          'Safari >= 5',
          'Android >= 4',
          'Ios >= 6',
          'last 4 version'
        ]
      })
    ]
  }
}]

设置

vue自动添加浏览器兼容前后缀操作

在网站上会发现

vue自动添加浏览器兼容前后缀操作

以下解释

vue自动添加浏览器兼容前后缀操作

补充知识:vue-cli 解决通过js import css无法自动加上浏览器前缀

1.找到build/utils.js

2.在exports.cssLoaders内添加如下代码

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap
  }
}
function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader]
  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }
  loaders.push(postcssLoader)
  ......
}

3.在项目目录下也就是与node_modules同级目录下新建 .postcssrc.js (注意前面有个点) 添加如下代码

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  // to edit target browsers: use "browserslist" field in package.json
  "autoprefixer": {}
 }
}

4.找到package.json文件添加如下代码 (注意:与devDependencies字段同级)

"browserslist": [
  "last 10 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "ie > 8"
 ]

5.安装如下依赖

npm install postcss-import --save-dev
npm install postcss-loader --save-dev
npm install postcss-url --save-dev
npm install autoprefixer --save-dev

6.这时可以启动你的工程了 试试吧

以上这篇vue自动添加浏览器兼容前后缀操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
Postman参数化实现过程及原理解析
Aug 13 #Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 #Javascript
vue路由分文件拆分管理详解
Aug 13 #Javascript
Postman环境变量全局变量使用方法详解
Aug 13 #Javascript
vue 实现把路由单独分离出来
Aug 13 #Javascript
vue项目接口域名动态获取操作
Aug 13 #Javascript
vue接通后端api以及部署到服务器操作
Aug 13 #Javascript
You might like
DOM XPATH获取img src值的query
2013/09/23 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Python简单获取自身外网IP的方法
2016/09/18 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python反射的用法实例分析
2018/02/11 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
汽车促销活动方案
2014/03/31 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
学雷锋月活动总结
2014/04/25 职场文书
校园广播稿精选
2014/10/01 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
公务员个人总结
2015/02/12 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android