vue 2.x + webpack 4.xでenvを使う

vue 2.x + webpack 4.x 系でenvを使うのにハマったのでメモ。

結論としてdotenv-webpackを使えばいけました。

$ echo "page=4" >> .env
$ yarn add dotenv-webpack
const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv('./.env')
	]
}
var app = new Vue({
  data: {
    products: [...Array(Number(process.env.page)).keys()]
  }
})
"scripts": {
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}