CODEWITHSUNDEEP
npmwebpackvue.jsvuejs2
SK -
SK -

Reputation: 469

Building a dist folder for Vue JS project

I am trying to create distribution folder for different environments (sit, uat, production). For this I have started using .env files for my Vue js project. Whem I am doing yarn sit or npm run sit. My dis. folder in linux box is not created properly. But in my windows machine it is working properly. In my package.json, I have different scripts for different environment.

"sit": "vue-cli-service --mode sit build",

In my windows machine, this is how the dist folder created. winddows machine dist folder

linux box dist folder

I am not sure what is the issue. In my dev depe, I have "@vue/cli-service": "^3.0.0-beta.15"

Upvotes: 2

Views: 12110

Answers (2)

SK -
SK -

Reputation: 469

I have finally figured out the issue.
First of all, we can use as many .env-file as per our requirement. If you want to use and create a production-like dist-folder, you have to specify the NODE_ENV on top of your file.
For example, If I want my uat environment package the same as production (which should be the same as production as we have to deploy on a server), just add NODE_ENV=production before your property file.

In your package.json, you have to add

"prod": "vue-cli-service --mode prod build"

At the time of creating the package, you can do npm run prod or yarn prod, whichever you use.

The issue which was happening was that for some other requirement, we were setting the NODE_ENV to some other value.
If NODE_ENV is already set to some junk value, the package build was not happening correctly. But when I unset the environment variable, all was good.

Right now, I have multiple .env-files as per the environment and I can create the dist-folder similar to production for deployment in the respective environment.

Upvotes: 1

smcstewart
smcstewart

Reputation: 2085

When you build using vue-cli-service your mode does indeed trigger including the appropriate .env file you've set up. However, regardless of the number of environments you have, the vue-cli-service builds only two different types of distributions by default depending upon the --mode switch:

  1. production, which is the default mode (or you can specify it with --mode production; or
  2. non-production, which in your case, is --mode sit and --mode uat.

By default, when you build for production your app is bundled up and you get the js directory, css etc depending upon your setup. For any other mode you specify, it builds a non-production distribution which does not have the app bundled, so you will not see the js folder for example. This is by default.

Now, in your case, what you're saying is that this performs differently depending upon the OS. I don't know your exact setup, but you either have an environment difference on the two machines, are running different commands, or there is a defect in vue-cli-service which you may need to raise an issue for. Double / triple check your environments and the commands you're running.

Just as an aside, if you're trying to build for different environments, you may want to add the dest switch to your build command so you can build to a different directory - something like:

"sit": "vue-cli-service build --mode sit --dest ./dist/sit",
"uat": "vue-cli-service build --mode uat --dest ./dist/uat",
"production": "vue-cli-service build --mode production --dest ./dist/production"

Upvotes: 2

Related Questions