web-dev-qa-db-ja.com

ビルド後に本番サイトを実行する方法vue cli

VueCLI 2を使用しており、実稼働環境でビルドしています。 build.jsがビルドされ、200KBにコンパイルされます。サーバーを開発として再実行すると、3MBがロードされました。 distフォルダー内のbuild.jsは200KBであると確信しています。 index.htmlを開こうとしましたが、機能せず、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>

コマンド

npm run build

npm run dev

node.jsvuejs2production-environmentvue-cli
16
Henry Chozo

npm run buildは、アプリのプロダクションビルドでdistディレクトリを作成します。

ブラウザでindex.htmlを提供するには、HTTPサーバーが必要です。

たとえば、 serve ：

npm install -g serve
serve -s dist

デフォルトのポートは5000ですが、-lまたは--listenフラグを使用して調整できます。

serve -s build -l 4000

ドキュメント：

35
Gabriel Bleu

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

7
Steven Spungin

ビルドはサーバーにデプロイする必要があります。そのため、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
0
Parth Patel