node.js+npm+vue+webpack+nginx前端项目打包部署到服务器

本文主要介绍vue+webpack打包部署到nginx服务器。因为可以需要依赖node.js,所有需要先安装node.js,步骤如下

1.首先先去下载node.js,点击查看下载安装步骤http://www.cnblogs.com/wuac/p/6381819.html，本主要介绍在window下的操作，所以别忘了将node.js和npm加入到环境变量下。npm是我们要用到的包管理工具，一会vue需要用到npm命令。

2.由于许多npm的源都是在国外的地址，用npm安装vue和webpack特别慢，所以我们这里利用淘宝的镜像服务器。

执行命令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

  然后回车等待命令结束。

3.接着安装全局的vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架

命令为：

cnpm install -g vue-cli

回车，等待安装

安装完后，可以输入：

vue -V

然后回车，如果出现vue的客户端版本信息，则说明安装成功了。

4.用 npm 安装 Webpack，

命令为：

cnpm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

5.在一个目录下新建一个vuepro文件夹，cd到该目录下，然后输入命令：

vue init webpack vue-test

(项目默认的名称)，此时，观察vuepro的文件夹下又多了一个vue-test文件夹，这个就是vue的模版项目。

6.启动调试，顺序输入以下命令：

cd vue-test
cnpm install(这里需要等待)
npm run dev（这个是debug部署命令）

出现端口，则表示启动成功，端口监听的就是所显示的端口号，此端口号，可以在vue-test/config/index.js文件里修改。

7.至此，开发环境就搭建好了，在浏览器访问http://localhost:8080(这个端口号，是上面第6步你配置的端口号)，就可以显示vue的页面了，

现在假设你在vue下开发好了前端页面，现在开始打包部署到服务器上，先在路径vue-test下输入命令：

npm run build

编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了。
2、网上下载nginx,下载地址http://nginx.org/en/download.html，解压下载的nginx文件。
3、配置部署，编辑nginx/conf 下的nginx.conf，修改如下图：