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 相关文章推荐
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue完美实现el-table列宽自适应
May 08 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
支持中文的php加密解密类代码
2011/11/27 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python处理二进制数据的方法
2015/06/03 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
运动会广播稿150字
2014/02/19 职场文书
化学专业自荐信
2014/05/28 职场文书
竞赛口号大全
2014/06/16 职场文书
建设工程授权委托书
2014/09/22 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers