vue.js+nginx+openresty

1、安装vue.js

安装 node.js

安装前准备：

$yum install libtool automake autoconf gcc-c++ openssl-devel

下载源码：

$wget https://nodejs.org/dist/v6.9....
解压缩：

$tar -zxvf node-v6.9.1.tar.gz

编译安装：

$./configure --prefix=/app/server

$make && make install

因为指定了安装目录，安装完成之后，需要把执行文件加到 /etc/profile 里才能全局使用。

 安装 vue-cli 命令行工具

如果访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org

回车之后，我就可以可以快乐的用 cnpm 替代 npm

$ vue init webpack my-project

$ cd my-project

$ cnpm install

$ cnpm run dev

2、安装openresty

3、将vue项目部署到nginx（此处是openresty搭建的nginx）、修改配置文件

进入到项目目录运行

$npm run build

根据实际情况修改nginx.conf配置文件

例如

 worker_processes  1;

#error_log  logs/error.log;

#error_log  logs/error.log  notice;

#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    include       vhost/*.conf;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

}

其中conf/vhost/目录下vue.conf

server

{

    listen 8090;

    server_name localhost;

    index index.html index.htm index.php;

    root /var/www/html/find;

    location / {

        try_files $uri $uri/ @router;

        index index.html;

    }

    location @router {

        rewrite ^.*$ /index.html last;

    }

}

将first_project目录下的dist目录下文件复制到/var/www/html/find/目录下。

启动nginx服务。 OK。