+++
date = "2020-03-25"
tags = ["vue2x"]
title = "vue 2.x + webpack 4.xでenvを使う"
slug = "vue2x"
+++

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

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


```sh
$ echo "page=4" >> .env
$ yarn add dotenv-webpack
```

```js:webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv('./.env')
	]
}
```

```js:src/main.js
var app = new Vue({
  data: {
    products: [...Array(Number(process.env.page)).keys()]
  }
})
```

```json:package.json
"scripts": {
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
```