在Nginx上部署vue项目(Mac版)

Posted shundong106

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Nginx上部署vue项目(Mac版)相关的知识,希望对你有一定的参考价值。

构建项目

将vue项目打包,打包后会在项目根路径下生成一个dist文件,这个就是需要发布到nginx服务器上的静态页面。(不同项目配置的打包命令可能稍有不同)

npm run dev   具体看的脚手架

安装Nginx

1、打开terminal终端

2、安装Command Line Tools

xcode-select --install

3、安装brew命令

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

4、安装nginx

brew install nginx

5、查看版本

nginx -v

6、启动nginx

sudo nginx

7、重新加载配置/重启/停止/退出nginx

sudo nginx -s reload | reopen | stop | quit

配置Nginx

配置nginx.conf来设置端口和映射路径,使项目在nginx上跑起来。

1、打开nginx.conf文件。一般该文件在/usr/local/etc/nginx/路径下,可通过“访达”->“前往文件夹”打开。

2、设置访问权限;设置监听端口和地址;设置非根路径项目地址。权限设置不对,会报403错误。端口建议设为默认的80,否则访问网址时需要手动带上端口,且会出现跨域问题。

注:Nginx路径配置取决于项目结构和项目中对URL的配置,这里一个域名下有多个项目,所以没用根路径配置,而是在根路径下指定了一层路径/x。项目的访问地址:http://aaa.bbb.com/x/#/login,对应的配置如下:

user  root wheel;    # 设置访问权限
worker_processes  1;
 
...
 
    server {
        listen       80;    # 设置监听端口
        server_name  localhost;    # 设置监听域名
 
...
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
...
 
        location ^~ /x {
            alias /Users/carrie/Documents/Workspace/x/dist;    # 项目打包后静态文件所在路径
            add_header Cache-Control no-store;
            #proxy_set_header Host $host:8080;
            break;
        }
 
        location ^~ /mockApi {
           proxy_pass  http://test:20910/mock;
           proxy_hide_header Access-Control-Allow-Origin;
           add_header Access-Control-Allow-Credentials true;
           add_header Access-Control-Allow-Headers Origin,Authorization,Access-Control-Allow-Origin,Access-Control-Allow-Headers,Content-Type;
           add_header Access-Control-Allow-Methods GET,POST,PUT,OPTIONS;
           add_header Access-Control-Allow-Origin http://localhost:8080;
        }
 
...
 
}

3、项目中对域名做了设定,所以要在hosts文件里,关联本机IP和设定的域名“aaa.bbb.com”。“访达”->“前往文件夹”,输入/private/etc/,打开文件夹下的hosts文件,作如下配置:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	aaa.bbb.com
255.255.255.255	broadcasthost
::1             localhost

运行项目

1、启动Nginx

sudo nginx

2、构建项目

npm install (第一次构建要安装依赖  我是 yarn install ) 
npm run dev

访问本地项目地址:http://aaa.bbb.com/x/#/login


版权声明:本文为CSDN博主「mocoe」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/mocoe/java/article/details/83932268


以上是关于在Nginx上部署vue项目(Mac版)的主要内容,如果未能解决你的问题,请参考以下文章

Linux——在Linux系统上打包和部署springboot+vue项目,nginx+mysql+redis+minio

Nginx本地部署Vue项目

Nginx部署Vue项目

vue项目打包部署到nginx上访问404

Nginx线上部署多个Vue项目(路径区分)

mac上nginx+jetty负载均衡部署一览