vueCli3.0发布到nginx，vue项目部署

1、nginx部分

nginx.conf配置文件

#负载均衡教程示例，讲解很好：https://blog.csdn.net/xyang81/article/details/51702900
#教程二：配置源自这里参考：https://www.cnblogs.com/Miss-mickey/p/6734831.html
#教程三：最简单的windows负载均衡配置：https://blog.csdn.net/yangzefei1991/article/details/53333557
#全局设置
#main
# 运行用户
#user www-data;
# 启动进程,通常设置成和cpu的数量相等,多少核
worker_processes auto;

# 全局错误日志及PID文件
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;

events {
worker_connections 2048;#单个后台worker process进程的最大并发链接数
}

#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
#设定mime类型,类型由mime.type文件定义
include mime.types;
default_type application/octet-stream;

sendfile on;

#将tcp_nopush和tcp_nodelay两个指令设置为on用于防止网络阻塞
tcp_nopush on;
tcp_nodelay 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 3000;

#记得配置域名
server_name localhost 127.0.0.1 a.com;

   client_max_body_size 10M;
   client_body_buffer_size 128K;
   #nginx作为服务器需要的配置
   location / {
       try_files $uri $uri/ /index.html;
   }

#需要跨域的接口地址
location /admin{
proxy_pass 代理域名或者ip;
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';
}

#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;
}
}
}
2、注意事项

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

就像我下面的配置文件

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

vueCli3.0发布到nginx，vue项目部署

猜你喜欢