如何使用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构建文件

回答

相关问题