Vue (Webpack) のビルド時に任意のJavaScriptのコードを埋込む方法
やり方
以下のようにvue.config.jsを書き加えれば、MY_VARというグローバル変数がビルド時に決まってランタイムで使える。
新しいプラグインなどをインストールする必要はない。
code:vue.config.js
const webpack = require('webpack');
module.exports = {
...
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
MY_VAR: ここに好きなJavaScriptのコードを文字列として書く,
})
]
}
};
つまり例としては、
MY_VAR: '"hello, world"' や
MY_VAR: '[1, 2, 3]'
のようになる。注目すべきはクォーテーション'がついていること。
もちろんvue.config.jsはJavaScriptなので以下のように条件を含んだような任意の式が書ける。 MY_VAR: process.env.MY_VAR ? process.env.MY_VAR : '"this is default"'
実際の使用例
実際の例としては
gh-cardでproductionと開発時にバックエンドのサーバーを切り替えるために使っている。