在前端開發中，使用CSS樣式是不可避免的。然而，不同瀏覽器對CSS的支持程度各不相同，其中最常見的問題之一是CSS屬性的兼容性問題。這就需要開發者手動添加相應的兼容性前綴，而這是一件費時費力且容易出錯的事情。為了解決這個問題，我們可以使用Vue自動加CSS前綴的功能。

npm install postcss-loader autoprefixer -D

要使用Vue自動加CSS前綴的功能，我們需要先安裝postcss-loader和autoprefixer這兩個包。我們可以使用npm來安裝它們：

module.exports = {
// ...
css: {
loaderOptions: {
postcss: {
plugins: [
require('autoprefixer')
]
}
}
}
}

接下來，在Vue的配置文件中，我們需要配置loaderOptions。

在這里，我們需要使用postcss作為CSS預處理器，并添加一個autoprefixer插件。我們可以這樣寫：

.foo {
display: flex;
}

現在，我們在組件中編寫一個帶有flex屬性的樣式，并且不用手動添加前綴了。我們只需要這樣寫：

當我們編譯這個組件時，Vue會自動地為我們添加瀏覽器前綴。所以最終編譯后的CSS如下：

.foo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

Vue自動加CSS前綴的功能能夠極大地簡化我們的開發工作，并且避免了手動添加前綴的錯誤。而且，它們還可以自動檢測瀏覽器的供應商前綴，從而確保我們的代碼在所有瀏覽器上都能正確地工作。