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