webpackビルドファイルを提供するためにngnixを使用する方法

Question

私はvue + webpackプロジェクトを作成しました。webpack-dev-middlewareでうまく動作します。今、私はそれをnginxで展開したいと思います。私がしていることは、webpack.build.config.jsを作成し、すべてのファイルをdistフォルダにバンドルすることです。次に、distフォルダをnginx htmlフォルダにコピーし、nginx.confにインデックスを割り当てます。しかし、それはエラーが述べている：

[Vueが警告]：テンプレートまたは が定義された関数ではなく、レンダリング：コンポーネントのマウントに失敗しました。 （ルートインスタンスにあります）

私はdevops/backendの初心者であり、全体的なビルドプロセスや展開プロセスと非常に混同しています。 webpack-dev-serverまたはnodejsは運用環境ではまだ必要ですか？私の実稼働環境のバックエンドはnginx/PHPとIIS/.Netです。今ではノードがまったくインストールされていません。

私nginx.confは

location/{ 
    root html/dist; 
    index index.html index.htm; 
} 

され、ビルドが、私は

WebPACKの-p --configを実行するとwebpack.build.config.jsは

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var public_dir = "components"; 
//var ModernizrWebpackPlugin = require('modernizr-webpack-plugin'); 

module.exports = { 
    entry: [ 
     path.join(__dirname,'./index.js') 
    ], 
    output: { 
     path: path.join(__dirname, '/dist/'), 
     filename: '[name].js', 
     publicPath: '/' 
    }, 
    devtool: 'eval-source-map', 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin('common.js'), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin(), 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: path.resolve(__dirname, 'index.html'), 
      inject: true 
     }) 
    ], 
    resolve: { 
     root: [path.resolve('./components')], 
     extensions: ['', '.js', '.css'] 
    }, 
    module: { 
     loaders: [ 
     ] 
    } 
}; 

です。 /webpack.build.config.js

Answer 1

私はvue-cliを使ってvuejs webpackプロジェクトを初期化しています。そして、プロジェクトがすでにスクリプトを構築している、あなたはそれを参照することができます建てた後、我々はdistフォルダを持っています

require('./check-versions')() 

process.env.NODE_ENV = 'production' 

var ora = require('ora') 
var rm = require('rimraf') 
var path = require('path') 
var chalk = require('chalk') 
var webpack = require('webpack') 
var config = require('../config') 
var webpackConfig = require('./webpack.prod.conf') 

var spinner = ora('building for production...') 
spinner.start() 

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 
    if (err) throw err 
    webpack(webpackConfig, function (err, stats) { 
    spinner.stop() 
    if (err) throw err 
    process.stdout.write(stats.toString({ 
     colors: true, 
     modules: false, 
     children: false, 
     chunks: false, 
     chunkModules: false 
    }) + '\n\n') 

    console.log(chalk.cyan(' Build complete.\n')) 
    console.log(chalk.yellow(
     ' Tip: built files are meant to be served over an HTTP server.\n' + 
     ' Opening index.html over file:// won\'t work.\n' 
    )) 
    }) 
}) 

。このような完全なパスを使用するnginxののhtmlフォルダ（デフォルト） コンフィグルート・パスに内のすべてのファイルをアップロードします。私はPM2ながらプロキシとしてngnix使用するのと同じケースで

listen  80; 
server_name mydomain www.mydomain; 
root /var/www/html;