如何使用ngnix在生產中提供webpack構建文件

我寫了一個vue + webpack項目，它在webpack-dev-middleware中工作正常。現在我想用nginx來部署它。我所做的是編寫一個webpack.build.config.js並將所有文件捆綁到一個dist文件夾中。然後，我只需將dist文件夾複製到nginx html文件夾中，並在nginx.conf中指定索引。然而，它有一個錯誤說：如何使用ngnix在生產中提供webpack構建文件

[VUE警告]：無法裝入組件：模板或渲染功能不是定義。（在根實例中找到）

我是devops /後端的新手，與整體構建或部署過程相當混淆。 webpack-dev-server或nodejs仍然需要在生產環境中使用嗎？我的生產環境後端是nginx/PHP和IIS/.Net，現在它根本沒有安裝節點。

我的nginx.conf是

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

而且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 -p --config。 /webpack.build.config.js

來源

2016-12-28 Stephanie Yang

對於我使用ngnix作爲而PM2代理同一案件（http://pm2.keymetrics.io /）管理nodejs服務器進程。 – ArkadyB

@ArkadyB請進一步詳細說明你如何使用pm2。例如，您使用什麼命令將其部署到生產中？ –

@NIMRODMAINA，正如PM2網站上說的那樣，它是nodejs應用程序的生產過程管理器，因此您可以使用任何你想要的工具構建應用程序 - webpack等，並使用pm2在後臺運行你的應用程序。請參閱官方網站獲取更多信息 - http://pm2.keymetrics.io/ – ArkadyB

我使用vue-cli來初始化vuejs webpack項目。而該項目已經構建腳本，你可以參考它：

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

建成後，我們將有一個dist文件夾。上傳的所有文件裏面的Nginx（默認）html文件夾配置根路徑使用這樣的完整路徑：

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

來源

2017-04-28 08:24:23

如何使用ngnix在生產中提供webpack構建文件

回答

相關問題