nginx部署vue项目

记录一下vue项目部署在nginx中的方法，项目中的vue项目名为cms

• cms项目的路径为：/usr/local/nginx/html/work/cms
• cms文件夹结构如下
  1）index.html，该文件为vue项目的入口
  2）staticcms，该文件夹用于存放vue项目的静态资源文件

1.如果我们想通过域名直接访问cms项目，则配置如下

server {
        listen       80;
        server_name  www.test.com;
        add_header Access-Control-Allow-Origin '*' ;
        location / {
                root html/work/cms;
                index index.html;	# hash模式
                try_files $uri $uri/ /index.html;	# history模式
        }
        location ^~ /staticcms/ {
                root html/work/cms;
        }
}

通过http://www.test.com/login访问，其中login为前端路由。

2.如果我们想在域名后再添加一个标识（cms）来访问项目，可以做如下配置

server {
        listen       80;
        server_name  www.test.com;
        add_header Access-Control-Allow-Origin '*' ;
        location ^~ /cms/  {
                root html/work;
                index index.html;	# hash模式
                try_files $uri $uri/ /cms/index.html;	# history模式
        }
        location ^~ /staticcms/ {
                root html/work/cms;
        }
}

通过http://www.test.com/cms/login访问，其中/cms/login为前端路由。当nginx需要配置多个前端项目时，这种方式比较适合。