How to run production build in VueJs?

user_14554075 0
Viewed 2963

I have worked to a VueJs project locally. Now I have to upload it on a VM of my university and it will become public. I think I should not upload the entire directory but only the 'dist' directory that I created with the command:

npm run build

First question: Is it correct?

Second question: How do I run the server now? For local's test I used to run it with the command:

npm run serve

but I think now I should use some other commands.

Thank you for help.

vue.js dev-to-production
3 Answers

Answer for questions:

  1. Yes. It is correct.

  2. Usually, you will need to serve the dist folder in a web server. Like nginx or apache.

It will work serving your index.html, inside /dist folder generated in the build step of your vuejs application.

Obs.: you should not serve your application in production with npm run serve as it is a development server monothreaded.

user_45981750

just simply

npm run build

Copy index.html and /dist/ folder into your website root directory. Done.

user_52567590

  1. The command npm run build is correct for preparing the project for deployment.

  2. You don't need to run the command npm run serve like you do on local.

What you will need for deployment after running the command npm run build are:

dist folder and index.html file.

You could deploy your project to any hosting provider you choose.

I will use aws s3 as example for a static application (The process is almost the same in other platforms).

  1. Login to aws

  2. Select s3

  3. Create a new bucket (Give it a preferred name and select region)

  4. Enable the option for Static Website Hosting on the bucket you just created. The fileds for Index Document and Error Document should be set to index.html

  5. Set Bucket Permission (Add Bucket Policy)

Paste this into the bucket policy editor and save. Change your-bucketName to the created bucket name

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucketName/*"
            ]
        }
    ]
}

  1. Upload the files (build.js in the dist folder and index.js)

    1. Click on your bucket name
    2. Select upload at the top-menu
    3. Upload the files indicated above

  2. Create a folder with name as dist inside your bucket and move the build.js inside.

  3. Click on All Buckets to go back. Select Properties of your deployed bucket at the top-right menu and click on Endpoint to lunch your hosted site.

user_118306280
Related