How to run production site after build vue cli

主宰稳场 提交于 2020-02-17 06:15:14

问题


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


回答1:


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



回答2:


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




回答3:


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


来源:https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!