vue自動添加瀏覽器兼容前后綴操作

更新時(shí)間：2020年08月13日 11:27:06 作者：姚輝乾

這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

1.安裝loader

安裝postcss-loader 和 autoprefixer

下載：

cnpm install postcss-loader autoprefixer --save-dev

在webpack.config.js里面設(shè)置以下代碼

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'
        ]
      })
    ]
  }
}]

設(shè)置

在網(wǎng)站上會發(fā)現(xiàn)

以下解釋

補(bǔ)充知識：vue-cli 解決通過js import css無法自動加上瀏覽器前綴

1.找到build/utils.js

2.在exports.cssLoaders內(nèi)添加如下代碼

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.在項(xiàng)目目錄下也就是與node_modules同級目錄下新建 .postcssrc.js (注意前面有個(gè)點(diǎn)) 添加如下代碼

// 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.這時(shí)可以啟動你的工程了試試吧

以上這篇vue自動添加瀏覽器兼容前后綴操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)
本篇文章主要介紹了Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下
2023-10-10
Element的Pagination分頁sync問題小結(jié)
本文主要介紹了Element的Pagination分頁sync問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
通過源碼分析Vue的雙向數(shù)據(jù)綁定詳解
使用vue也好有一段時(shí)間了，雖然對其雙向綁定原理也有了解個(gè)大概，但也沒好好探究下其原理實(shí)現(xiàn)，下面這篇文章通過源碼主要分析了Vue的雙向數(shù)據(jù)綁定，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
vue3如何自定義js文件(插件或配置)
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Ant Design的Table組件去除
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vuejs如何通過Axios請求數(shù)據(jù)
這篇文章主要介紹了Vuejs如何通過Axios請求數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動效果
這篇文章主要介紹了如何基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動效果,文中通過代碼示例和圖文講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手試一下
2024-09-09
手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式
如今的Vue3已經(jīng)勢不可擋,當(dāng)然搭建一個(gè)全新的Vue3項(xiàng)目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11