關于Vue Cookie會變的問題，我們需要先了解Cookie是什么。Cookie是瀏覽器提供的一種非常重要的保持狀態的機制。通過設置Cookie，我們可以在用戶訪問我們的站點時帶上上次訪問的狀態信息，這使得我們可以在不同的瀏覽器、甚至不同的設備上保持應用的狀態。

在前端開發中，我們會用到Vue這個框架來構建單頁面應用，而Cookie也是不可避免地會被用到。Vue提供了一個非常方便的插件——vue-cookies，可以幫助我們在Vue中掛載Cookie。

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

上面的代碼展示了我們如何在Vue中使用vue-cookies插件，它可以讓Vue代碼像這樣來讀取和寫入Cookie：

Vue.$cookies.set('key', 'value')
Vue.$cookies.get('key')
Vue.$cookies.remove('key')

但是我們會發現，Vue里的Cookie好像會不斷變化，這是因為在前端開發中，我們經常會使用webpack打包應用，在不同的打包中，我們的Cookie會發生變化。

為了解決這個問題，我們可以在webpack中配置cookie的path屬性來避免Cookie發生變化。

module.exports = {
//...
devServer: {
proxy: {
'/api/*': {
target: 'http://localhost:8080',
changeOrigin: true
}
},
watchContentBase: true,
contentBase: './',
hot: true,
overlay: true,
port: 8081,
historyApiFallback: {
rewrites: [
{
from: /.*\.html/,
to: path.join(__dirname, 'public/index.html')
}
]
},
//...
// 重點在這里
before(app) {
app.use(cookieParser())
app.use((req, res, next) =>{
//設置cookie的path屬性
res.cookie('key', 'value', {path: '/'})
next()
})
}
}
}

以上代碼展示了我們如何在webpack的配置中設置cookie的path屬性。我們可以在before方法中，通過res里的cookie方法設置path屬性為'/'，這樣，不管是開發環境還是打包后的環境，我們設置的Cookie都不會發生變化。

總的來說，Vue Cookie會變的原因在于webpack打包過程中，我們需要通過設置cookie的path屬性來避免Cookie發生變化，從而保證我們應用的狀態。