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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
让Vue也可以使用Redux的方法
May 23 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
微信小程序实现弹框效果
May 26 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
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
php验证是否是md5编码的简单代码
2014/04/01 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python 可爱的大小写
2008/09/06 Python
python编程羊车门问题代码示例
2017/10/25 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python enumerate内置函数用法总结
2020/01/07 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
最新pycharm安装教程
2020/11/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
大学生求职自荐信
2013/12/12 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
消防安全标语
2014/06/07 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
队列队形口号
2015/12/25 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Python实现照片卡通化
2021/12/06 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python