找了不少資料如何發(fā)布到服務器，然而還是沒找到合適的可實際操作的文檔。很多文檔打著上線發(fā)布的標題，其實就是本地運行而已。其實vue2.0工程發(fā)布相當簡單。

文章重點：

講解vue工程配置部分的意義 如何打包為生產環(huán)境中的前端工程 如何打包發(fā)布到云端以及nginx服務器配置

一、vue工程配置部分的意義

首先我們先看下vue2.0整體工程目錄結構 (非重點省略)

- vueDemo   //你的vue工程名  - build     - build.js    - check-version.js     - utils.js    - vue-loader.conf.js     - webpack.base.conf.js     - webpack.dev.conf.js //這個就是針對我們開發(fā)環(huán)境所對應的webpack配置打包文件了    - webpack.prod.conf.js //這個針對我們生產環(huán)境所對應的webpack配置打包文件了   - config    - dev.env.js //定義Node 開發(fā)環(huán)境配置    - index.js  //打包dist目錄結構配置    - prod.env.js //定義Node 生產環(huán)境    - node_modules    - src    - static    - ...   - package.json 

下面我將截取package.json文件中的部分代碼作解釋說明：

"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "build": "node build/build.js" },

相信看過官網的都知道了，我們啟動我們的vue工程使用的都是npm run dev ，這里執(zhí)行的本質，其實就是使用webpack打包，所使用的配置文件，就是我上面提到的bulid目錄下的 webpack.dev.conf.js。也就是我們的開發(fā)環(huán)境的執(zhí)行結果了。

二、如何打包為生產環(huán)境中的前端工程

看到這里你大概想那么我所需要的生產環(huán)境需要執(zhí)行什么命令呢？

下面我將一一揭曉答案，其實答案就是我package.js 中的script腳本 build /bulid.js  執(zhí)行命令 npm run build 

以下為 build.js的主要內容，都是vue工程自己生成的東西

'use strict'require('./check-versions')()process.env.NODE_ENV = 'production'const ora = require('ora')const rm = require('rimraf')const path = require('path')const chalk = require('chalk')const webpack = require('webpack')const config = require('../config')const webpackConfig = require('./webpack.prod.conf')const spinner = ora('building for production...')spinner.start()rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, (err, stats) => {  spinner.stop()  if (err) throw err  process.stdout.write(stats.toString({   colors: true,   modules: false,   children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.   chunks: false,   chunkModules: false  }) + '/n/n')  if (stats.hasErrors()) {   console.log(chalk.red(' Build failed with errors./n'))   process.exit(1)  }  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'  )) })})