Login/Register
How to run production site after build vue cli
Asked Answered
Solved node.jsvuejs2production-environmentvue-cli
S

5

69

I'm using VueCLI 2 and build as production. THe build.js is built and compiled into 200KB. When I re-run the server as development, it loaded 3MB. I'm sure the build.js inside dist folder is 200KB. I tried to open index.html but it doesn't work and redirect to root directory on website.

Package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

Webpack

module.exports = { ...
module:{
 ...
 plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
 ],
 devtool: '#eval-source-map'
},
...
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
   new webpack.DefinePlugin({
    'process.env': {
     NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
     warnings: true
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
      return module.context && module.context.indexOf('node_modules') !== -1;
    }
  })
 ])
}

HTML

<body>
  <script src="/dist/vendor.js"></script>
  <script src="/dist/main.js"></script>
</body>

Command

npm run build

npm run dev

Supersaturated answered 31/10, 2017 at 11:37 Comment(0)
S
146

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:

Scurry answered 31/10, 2017 at 11:42 Comment(6)
Thanks a lot was searching this for long. Although the images are not getting loaded. Any idea why? – Euryale
Worth to mention - default port is 5000 - if you want to listen on different port use flag -l serve -s dist -l 8080 – Ibby
@PrathameshAware: did you solved the image loading problem? I've the same problem ! – Typesetting
It works but the port is always 5000. Do you know how can I change that to something else?? – Hobbs
I am running into CORS issue when I run production build with serve package, but not with development build. Any idea how to solve this? – Rollway
How can we rewrite all requests to index.html to use Vue-Router history mode? See router.vuejs.org/guide/essentials/history-mode.html – Bosomy
H
39

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
Hokeypokey answered 26/11, 2020 at 22:52 Comment(2)
Thank You, works just fine! – Benignity
This does indeed set NODE_ENV to "production". But to serve the dist folder, consider using the serve command directly as per other answers. – Freefloating
B
11

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

Barth answered 17/8, 2018 at 15:42 Comment(2)
Do you know what are the benefits of express (compared to serve) for static file serving? – Shakedown
with more complexity comes more customization – Barth
F
10

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 (but this will depend on what you already have installed):

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
Freefloating answered 7/3, 2022 at 16:13 Comment(1)
"without having to install any extra packages" - I executed your npm/npx commands and I was asked if I wanted to install [email protected] . It works after installing the dependencies. – Gourmand
W
0

Build should be deployed to the server, Hence, I don't think that there is any inbuilt way in vue-cli to run build locally.

To run build locally, we need to configure the server separately and run the build on the server as follow,

1) Install lite server via below command

$ npm install -g lite-server

2) Add below scripts in package.json

"lite": "lite-server –port 10001",    
"start": "npm run lite"

3) In root directory create bs-config.js file and add below script

module.exports = {
  port: 3000,
  server: {
    baseDir: './dist'
  }
}

4) Lastly, Run it via below command 

$ npm run start
Whizbang answered 23/4, 2019 at 8:13 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.