Window环境下Vue+Webpack前端环境搭建及nginx部署（一）

1. 安装node.js

• node.js是什么?
  node.js是JavaScript的运行时环境,它不是一个JavaScript框架,更不是浏览器前端的库,不能与jQuery、AngularJS等相提并论。node.js是一个让JavaScript运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
• 安装参考：http://www.cnblogs.com/wuac/p/6381819.html

2. 安装npm（可略过，node安装里面自带了npm）

• 什么是npm？
  它是node的包管理工具。npm为开发者提供了一个很好的分享重用的方式，同时提供了很好的方式来更新代码。这些被重用的代码称作包，有时也称作模块。一个包通常包含了一个或者多个文件，同时也包含了一个定义了这个包元信息的文件"package.json"。在一个应用中，例如网站会依赖成百上千个包，这些包一般来说都比较小。通常情况下开发者创建一个包用于解决一个特定的问题。
• 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
  注：这里利用了淘宝的镜像服务器，因为大部分的源都在国外的地址，安装起来特别慢，所以这里使用了淘宝的镜像。

3. 安装vue-cli脚手架

接着安装全局的vue-cli脚手架，用于帮助你快速搭建所需的Vue的开发模板框架
cnpm install -g vue-cli回车，等待安装,安装完成后，可以输入vue -V 然后回车，如果出现vue客户端版本号，则说明成功的安装了vue

4. 用npm安装webpack

• webpack是什么?有什么用?
  WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
• 安装命令: cnpm install webpack -g
  可以使用: webpack -h试试是否安装成功.

5. 快速构建Vue项目

前面一大堆的安装,就是为了接下来的快速构建项目
步骤:

1. 磁盘下新建目录:如 D://demo/vue_test
2. cd到D://demo/vue_test目录下
3. 输入命令: vue init webpack test1 //(项目名称:test1),初始化项目以后,就可以看到许多的文件夹了
   各个文件夹的说明如下:

目录/文件           说明
build               项目构建(webpack)相关代码
config              配置目录，包括端口号等。我们初学可以使用默认的。
node_modules        npm 加载的项目依赖模块

src                 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets:             放置一些图片，如logo等。
components:         目录里面放了一个组件文件，可以不用。
App.vue:            项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js:            项目的核心文件。

static              静态资源目录，如图片、字体等。
test                初始测试目录，可删除
.xxxx文件            这些是一些配置文件，包括语法配置，git配置等。
index.html          首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json        项目配置文件。
README.md           项目的说明文档，markdown 格式

4. 切换到项目根目录下(上面创建的目录位置在 D://demo/vue_test/test1)
5. 如果没有安装npm,需要先安装npm
6. npm run dev 以开发模式运行项目
   此时就已经看到项目启动了

D:\vue\test_vue_cli\vue-test1>npm run dev

> [email protected] dev D:\vue\test_vue_cli\vue-test1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3835ms                                                                          10:15:27

 I  Your application is running here: http://localhost:8081

访问地址: http://localhost:8081 , 即可看到如下的页面

捕获.PNG

此时说明项目已经成功的运行了。

6. 部署编译

1. 在项目的根目录下运行命令 npm run build 执行打包,命令执行完毕以后,即可在项目的根目录下看到生成了一个 dist 的文件夹, 此dist文件夹就是打包生成好的项目了,可以直接放在nginx下进行部署了
2. 网上下载nginx,下载地址http://nginx.org/en/download.html,下载时候一定要注意自己的环境是windows还是linux环境，以免下错版本，解压下载好的nginx文件
3. 配置部署，编辑D:\software\nginx\nginx-1.15.5\conf\nginx.conf下的nginx.conf,修改如下图

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   "D:\demo\vue-test\test1\dist";
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

主要关注的地方有:
listen 80; // 部署的端口号
server_name localhost; // 服务的地址
location / { root "D:\demo\vue-test\test1\dist"; // 刚才编译的dist目录 index index.html index.htm; }

4. 启动nginx
   命令行中切换到nginx解压目录的根目录,执行 start nginx

5. 停止nginx服务
   nginx -s quit

6. 重启nginx服务
   nginx -s reload

nginx文档参考:http://www.nginx.cn/doc/

水平有限，欢迎大家批评指正~