linux搭配nginx部署vue项目

70544-20181229093026047-1043051786.jpg

首先安装nginx

https://blog.csdn.net/king_kgh/article/details/74973040

打包项目

上传到服务器

修改配置文件

vi /usr/local/nginx/conf/nginx.conf

路由为hash模式

#user  nobody;
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;
    default_type  application/octet-stream;


    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  IP;
        root   /www/wwwroot/132.232.66.140;
        location / {
            root   /www/wwwroot/IP/blogWeb;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        
        location /blogManageWeb { 
            alias   /www/wwwroot/IP/blogManageWeb/;
            try_files $uri $uri/ /blogManageWeb/index.html;
            index  index.html index.htm;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }
        
        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       81;
        server_name  localhost;
        location / {
            root   /home/upload;
            index  *.png;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
      }
    }
}

router/index.ts:

const router = new VueRouter({
  mode: "hash",
  routes
})

vue.config.js

const getRoot = (env) => {
  let root = ''
  switch (env) {
    case 'production':
      root = '/blogManageWeb/'
      break
    case 'development':
      root = '/'
      break
    case 'reprod':
      root = '/'
      break
  }
  return root
}

publicPath: getRoot(env),

通过反向代理实现80端口下两个项目 但是记得修改blogManageWeb的配置publicPath

路由模式为history

nginx配置文件没动，只改了router/index.ts
const router = new VueRouter({
  base:'/blogManageWeb',
  mode: "history",
  routes
})

nginx重启

cd /usr/local/nginx/sbin

./nginx -s reload