How to run production site after build vue cli

The Vue CLI tooling (vue-cli-service serve --mode production) still seemed to be serving the development files for me, albeit with process.env.NODE_ENV === 'production'.

To serve the contents of dist, the following worked for me without having to install any extra packages:

npm run build
npx serve dist

With custom port and SSL key/certificate:

npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem

You can also put this command into your package.json, e.g.

  "scripts": {
    "serve": "vue-cli-service serve",
    "prod": "npx serve dist",
    ...
  }

Then just do:

npm run prod

Very easy with express, and highly extensible/configurable.

Install

npm install -D express

Compose

server.js

// optional: allow environment to specify port
const port = process.env.PORT || 8080

// wire up the module
const express = require('express') 
// create server instance
const app = express() 
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))

Execute

node server.js

Production build can be run locally by utilizing Vue CLI's tooling simply by running:

vue-cli-service serve --mode production

For convenience, this can be added to package.json scripts:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "production": "vue-cli-service serve --mode production"
  }

Command:

$ npm run production

npm run build creates a dist directory with a production build of your app.

In order to serve index.html in a browser you need an HTTP server.

For example serve:

npm install -g serve
serve -s dist

The default port is 5000, but can be adjusted using the -l or --listen flags:

serve -s build -l 4000

Docs:

• https://create-react-app.dev/docs/deployment#static-server
• https://github.com/zeit/serve
• https://cli.vuejs.org/guide/deployment.html#previewing-locally