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

1. 安装node.js

  • node.js是什么?
    node.js是JavaScript的运行时环境,它不是一个JavaScript框架,更不是浏览器前端的库,不能与jQuery、AngularJS等相提并论。node.js是一个让JavaScript运行在服务端的开发平台,它让 JavaScript 成为与PHPPythonPerlRuby 等服务端语言平起平坐的脚本语言
  • 安装参考: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 格式
  1. 切换到项目根目录下(上面创建的目录位置在 D://demo/vue_test/test1)
  2. 如果没有安装npm,需要先安装npm
  3. npm run dev 以开发模式运行项目
    此时就已经看到项目启动了
D:\vue\test_vue_cli\vue-test1>npm run dev

> test1@1.0.0 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; }

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

  2. 停止nginx服务
    nginx -s quit

  3. 重启nginx服务
    nginx -s reload

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

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

推荐阅读更多精彩内容