多个Vue项目如何配置nginx

环境基于window,文件中的配置路径为绝对路径。window中配置nginx，路径要使用//代替\

业务需求：一个服务器运行两个vue项目，并且要求端口号必须是一致的。

实现效果：http://localhost:8080/，http://localhost:8080/screen。

一，Vue路由Hash模式配置nginx

路径为/访问项目配置：

将Vue-router插件中基础路径选项base设置为/。

router/index.js

const router = new VueRouter({
  base:'/',
  routes,
})

打包好的文件dist的绝对路径复制，打开nginx配置文件nginx.conf,在servera选项中配置路径

server:{
	# ....
    location / {
        root   D://nginx-1.18.0//html//app//dist//;
        index  index.html index.htm;
    }
	#....
}

路径为/screen访问项目配置：

router/index.js

const router = new VueRouter({
  base:'/screen',
  routes,
})

vue.config.js

module.exports = {
    publicPath:'/screen/',
    //...
}

base选项与publicPath选项值要一致；关于publicPath的介绍

server:{
	# ....
    location /screen {
        alias   D://nginx-1.18.0//html//screen//dist//;
        index  index.html index.htm;
    }
	#....
}

nginx.conf

#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;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location /screen {
        	alias   D://nginx-1.18.0//html//screen//dist//;
        	index  index.html index.htm;
    	}
        location / {
        	root   D://nginx-1.18.0//html//app//dist//;
        	index  index.html index.htm;
    	}
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
       # error_page   500 502 503 504  /50x.html;
       # location = /50x.html {
       #     root   html;
       # }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

Hash模式配置完成了！

二，Vue路由History模式配置nginx

同Hash模式配置nginx,History模式配置nginx对Vue文件的操作是一样的。唯独在nginx.conf需要添加try_files选项配置。

演示的两个Vue项目中router/index.js将History模式打开

router/index.js

const router = new VueRouter({
  mode:'history'
 //...
})

nginx.conf

#...
server:{
	# ....
	location / {
		root D://nginx-1.18.0//html//app//dist//;
		index index.html index.htm;
		try_files  try_files $uri $uri/ /index.html;
	}
    location /screen {
        alias   D://nginx-1.18.0//html//screen//dist//;
        index  index.html index.htm;
        try_files $uri $uri/ /screen/index.html;
    }
	#....
}
#...

这样Vue路由History模式就配置好了。

三，nginx.conf文件中root与alias的区别

root,alias都是指定文件路径的方式

alias指定文件路径的后面必须以/结束 ,root指定文件路径以/结束不是必须的。

• 当url没有前缀

  url没有前缀时，使用root,alias没有什么区别

  root

  location / {
      root D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  

  alias

  location / {
      alias D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  

  使用alias,root都能达到我们想要的效果

• 当url有前缀

  url有前缀后，root,alias各自有不同的表现

  root

  location /screen {
      root D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  

  指定的文件路径会变成:root路径+location路径；服务器就会去D:\\nginx-1.18.0\html\app\dist\screen路径下寻找index.html文件，但该路径下没有。访问时是404页面

  alias

  location /screen {
      alias D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  

  指定的文件路径不会发生变化，alias路径替换location路径

四，try_files的作用

try_files相当于重定向的作用

location /screen {
    root D://nginx-1.18.0//html//app//dist//;
    index index.html index.htm;
    try_files $uri $uri/ /screen/index.html;
}

try_files语法:

try_files file... uri

该语法表示:

try_files后面可以定义多个文件路径和最后一个作为内部跳转的uri，文件路径是root和alias指令合在一起构造而成的

例如：访问http://localhost/screen, $uri就是/screen

try_files第一个值是$uri, root+$uri为D:\nginx-1.18.0\html\app\dist\screen 明显服务器查找不到该文件夹；

try_files第二个值是$uri/, root+$uri/为D:\nginx-1.18.0\html\app\dist\screen\ 明显服务器也查找不到该文件夹;

最后只能返回/screen/index.html,其中/screen会被root或alias替换 ，实际路径为D:\nginx-1.18.0\html\app\dist\index.html

前端工程师还需要知道的知识点:nginx匹配规则及优先级

参考

https://juejin.cn/post/6926785971287490573