记录一下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
需要配置多个前端项目时,这种方式比较适合。