web-dev-qa-db-fra.com

Comment exécuter le site de production après la construction vue cli

J'utilise VueCLI 2 et je fais de la production. Le build.js est construit et compilé en 200 Ko. Lorsque je réexécute le serveur en tant que développement, il charge 3 Mo. Je suis sûr que le dossier build.js dans le dossier dist est de 200 Ko. J'ai essayé d'ouvrir index.html mais cela ne fonctionne pas et je redirige vers le répertoire racine du site Web.

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>

Commande

npm run build

npm run dev

node.jsvuejs2production-environmentvue-cli
16
Henry Chozo

npm run build crée un répertoire dist avec une version de production de votre application.

Afin de servir index.html dans un navigateur, vous avez besoin d'un serveur HTTP.

Par exemple servir :

npm install -g serve
serve -s dist

Le port par défaut est 5000, mais peut être ajusté à l'aide de -l ou --listen drapeaux:

serve -s build -l 4000

Documents:

35
Gabriel Bleu

Très facile avec express, et hautement extensible/configurable.

Installer

npm install -D express

Composer

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}`))

Exécuter

node server.js

7
Steven Spungin

La construction doit être déployée sur le serveur. Par conséquent, je ne pense pas qu'il existe un moyen intégré dans vue-cli pour exécuter la construction localement.

Pour exécuter la build localement, nous devons configurer le serveur séparément et exécuter la build sur le serveur comme suit,

1) Installez le serveur Lite via la commande ci-dessous

$ npm install -g lite-server

2) Ajoutez les scripts ci-dessous dans package.json

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

3) Dans le répertoire racine, créez le fichier bs-config.js et ajoutez le script ci-dessous

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

4) Enfin, exécutez-le via la commande ci-dessous

$ npm run start
0
Parth Patel