Build for production not minifying app.js

[matheusgrieger]

Version

3.0.1

Node and OS info

Node 10.6.0 / npm 6.4.0 / Windows 10

Steps to reproduce

• Created a new project with vue create and chose my settings
• Added some SCSS, imported, and ran npm run build

What is expected?

Split CSS from JS, and minify everything.

What is actually happening?

CSS is still inside JS and not only the JS file app.js is not being minified, but all evals from development are still in there.

---

I've restarted my computer, deleted node_modules and reinstalled everything. Also I notice the "building for production" text is displayed, so it should be doing the right thing, yet the output app.js file is 933.61kb in size, and I only have a simple Vue Vuex setup and some CSS, nothing more.

[yyx990803]

You probably have a default NODE_ENV set in your shell. Delete it, or explicitly set NODE_ENV when running build.

[rowild]

Is it possible to check if there is a "default NODE_ENV" value set anywhere?

[matheusgrieger]

@rowild as it turns out, @yyx990803 was right. However, on Windows, I have no idea where that would be set. That said, I added cross-env and changed my build script to:

cross-env NODE_ENV=production vue-cli-service build

It solved my problem.

[rowild]

Yes, Chen's tip is totally correct.
I was just wondering, if there is some kind of magic terminal command that spits out, whether I have NODE_ENV defined anywhere globally... :-)
Thank you for your feedback!!!

[matheusgrieger]

You can try echoing your environment vars directly from the console/terminal/prompt.

This anser and the answer below it covers the main ways of doing that.

[appsparkler]

For, Windows user, this is what worked for me:

Check NODE_ENV in the text file:
printenv > env.txt && notepad env.txt

(set NODE_ENV to production if it is something else)

OR try cross-env:

npm i -D cross-env

...then in the package.json

cross-env set NODE_ENV=production vue-cli-service build

My 850KB file sized down to around 82KB file

[pradeep-here]

Hi @appsparkler, @yyx990803
I tried cross-env set NODE_ENV=production vue-cli-service build

Still js is not minified
In console logs, its showing names of individual js files, and content of files can be seen as original files on clicking them.

Is there any other config required in vue.config.js ?
I am using Vue 2.x, and have below vue.config.js

module.exports = {
  transpileDependencies: ["vuetify"],
  configureWebpack: {
    devtool: 'source-map'
  },
};

[appsparkler]

Hi @pradeep-here ,

Can you try:

module.exports = {
  // ...
  mode: 'production',
  // ...
}

There's more information available here.