1、nginx部分

nginx.conf配置文件

#user  nobody;
worker_processes auto;

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

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
#长连接
    keepalive_timeout  65;
#数据压缩(能压缩掉70%左右)
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 3;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";

   #服务器配置
    server {
        listen       80;
        server_name  localhost www.baidu,com;

	client_max_body_size 10M;
	client_body_buffer_size 128K;

	location / {
		try_files $uri $uri/ /index.html;
	}
	location /admin {
		proxy_pass	http://localhost:8901/resource;
		add_header Content-Type "text/plain;charset=utf-8";
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
    }

}


2、注意事项

1、vue.config.js文件配置,注意当发布到nginx的情况下,生产环境(正式环境)需要改为“/”

这里别被那些文档骗了,我是vue cli3.0,如果改为./会导致资源加载不正确,被坑死

就像我下面的配置文件

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", //部署应用包时的基本 URL
  outputDir: "dist", //打包目录
  indexPath: "index.html",
  configureWebpack: {
    //外部扩展百度地图
    externals: {
      BMap: "BMap"
    }
  }
};

3、打包好的文件直接放到nginx的html目录下

4、该nginx发布已经解决路由访问404问题。

5、刚发布看的人有点多。大家按我发布的博文一模一样走是不会出问题的。我个人已经测试过跨域请求(之前就是软件实施,nginx跨域太简单了),直接路由访问不产生404问题。

不产生404原理:让服务器产生404的页面全部指向根目录:“/”,这样vue就会根据当前的路由地址,然后进行再次的内部重定向,然后访问到你的页面。tomcat和nodejs未测试。但是nodejs是坚决不能出现这样的问题的。比较大家是一家不是。

5、参考:https://www.cnblogs.com/beileixinqing/p/7490134.html

参考:https://www.cnblogs.com/mmzuo-798/p/9273754.html

Logo

前往低代码交流专区

更多推荐