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。

猜你喜欢

转载自blog.csdn.net/Malloc_New/article/details/78411300