Как запустить производственный участок после сборки vue cli

Я использую VueCLI 2 и создаю как производство. Конструкция build.js построена и скомпилирована в 200 КБ. Когда я повторно запускаю сервер в качестве разработки, он загружает 3 МБ. Я уверен, что файл build.js внутри dist находится в 200 КБ. Я попытался открыть index.html, но он не работает и перенаправляется в корневой каталог на веб-сайте.

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>

Команда

npm run build

npm запустить dev

Ответы

Ответ 1

npm run build создает каталог dist с производственной сборкой вашего приложения.

Чтобы обслуживать index.html в браузере, вам нужен HTTP-сервер.

Например, служить:

npm install -g serve
serve -s dist

Порт по умолчанию - 5000, но его можно настроить с помощью флагов -l или --listen:

serve -s build -l 4000

Docs:

Ответ 2

Очень легко с express, и очень расширяемый/настраиваемый.

устанавливать

npm install -D express

компоновать

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

казнить

node server.js

Ответ 3

Сборка должна быть развернута на сервере, поэтому я не думаю, что в vue-cli есть какой-либо встроенный способ запустить сборку локально.

Чтобы запустить сборку локально, нам нужно настроить сервер отдельно и запустить сборку на сервере следующим образом:

1) Установите облегченный сервер с помощью следующей команды

$ npm install -g lite-server

2) Добавьте ниже скрипты в package.json

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

3) В корневом каталоге создайте файл bs-config.js и добавьте приведенный ниже скрипт

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

4) И наконец, запустите его с помощью команды ниже

$ npm run start