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)文章
下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題
這篇文章主要介紹了解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細(xì)，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本文通過實(shí)例給大家講解了vue的toast彈窗組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例
本篇文章主要介紹了vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
<keep-alive> 是一個抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
本文主要介紹了vue封裝el-upload批量上傳只請求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02