vue自動添加瀏覽器兼容前后綴操作
更新時間：2020年08月13日 11:27:06 作者：姚輝乾
這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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.在項目目錄下也就是與node_modules同級目錄下新建 .postcssrc.js (注意前面有個點(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.這時可以啟動你的工程了 試試吧
以上這篇vue自動添加瀏覽器兼容前后綴操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue2.0如何發(fā)布項目實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
element?plus如何為表格某列數(shù)據(jù)文字設(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í)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
使用vue也好有一段時間了，雖然對其雙向綁定原理也有了解個大概，但也沒好好探究下其原理實現(xiàn)，下面這篇文章通過源碼主要分析了Vue的雙向數(shù)據(jù)綁定，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vuejs如何通過Axios請求數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何基于Vue2實現(xiàn)歌曲播放和歌詞滾動效果,文中通過代碼示例和圖文講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手試一下2024-09-09
如今的Vue3已經(jīng)勢不可擋,當(dāng)然搭建一個全新的Vue3項目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項目的最佳方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11