vue.js+nginx+openresty

最新推荐文章于 2025-07-01 15:31:34 发布

Malloc_New

最新推荐文章于 2025-07-01 15:31:34 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Malloc_New/article/details/78411300

本文介绍如何安装Node.js及Vue CLI，并通过OpenResty部署Vue项目至Nginx服务器，包括配置Nginx及启动服务的具体步骤。

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。