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中的jQuery()方法用法分析
Dec 27 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
使用 vue.js 构建大型单页应用
Feb 10 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 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
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
js 操作符汇总
2014/11/08 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
详解Python中where()函数的用法
2018/03/27 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python递归实现打印多重列表代码
2020/02/27 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
国际会计专业求职信
2014/08/04 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Java字符串逆序方法详情
2022/03/21 Java/Android