Vue是一個漸進式JavaScript框架，可以幫助我們構建交互式的單頁應用程序。在實際開發中，我們通常需要使用Webpack或者Rollup等打包工具將Vue應用打包成一個應用程序。這個過程中我們需要使用一些變量來控制Vue應用程序的配置，使用這些變量可以讓我們的應用程序更加靈活和可擴展。

在Vue應用中使用變量需要在webpack的配置文件中定義這些變量。我們可以使用webpack.DefinePlugin將這些變量定義到webpack的全局變量中。定義好這些變量后，我們就可以在應用程序中使用這些變量了。

new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
API_BASE_URL: JSON.stringify('https://api.example.com')
}
})

上面的代碼中，我們在process.env對象中定義了兩個變量，NODE_ENV和API_BASE_URL。其中，NODE_ENV在Vue應用程序中被用來判斷當前應用程序是否處于開發環境或生產環境。而API_BASE_URL則是應用程序的API網關地址。

在Vue應用程序中使用這些變量非常簡單，就像在JavaScript中使用常量一樣：

export default {
data () {
return {
apiBaseUrl: process.env.API_BASE_URL
}
},
created () {
console.log('NODE_ENV:', process.env.NODE_ENV)
}
}

上面的代碼中，我們使用process.env.API_BASE_URL將API網關地址傳遞到了Vue組件中。在created生命周期函數中，我們還可以使用process.env.NODE_ENV來判斷當前的應用程序環境。

除了使用webpack的DefinePlugin之外，我們還可以使用.env文件來管理Vue應用程序中的變量。使用.env文件來管理變量可以使配置更加靈活。為了使用.env文件中的變量，我們需要修改webpack配置文件，加載dotenv依賴。

const Dotenv = require('dotenv-webpack')
module.exports = {
// ... other config
plugins: [
new Dotenv()
]
}

上面的代碼中，我們通過添加Dotenv插件，讓webpack自動加載.env文件中的變量。我們只需要在.env文件中定義我們需要的變量，然后在Vue應用程序中使用它們。

export default {
data () {
return {
apiBaseUrl: process.env.API_BASE_URL
}
}
}

總之，我們可以使用webpack的DefinePlugin或者.env文件來管理Vue應用程序中的配置變量。使用這些變量可以讓我們的應用程序更加靈活和可擴展。