在Nginx上部署vue项目（Mac版）

Posted 2020-12-17 shundong106

构建项目

将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