Nginx - Vue项目实战 - 《🥇前端进阶目录》

前端项目打包
配置文件参考

前端项目打包

打包之前在Vue的配置文件里去修改公共路径的配置，改成前端项目服务的名字。例如 admin

vue.config.js

module.exports = {
    publicPath: '/admin/'   //公共路径
}

同时在项目的router目录下 index.js 为Vue项目指定路由基本路径为 /admin/
router/index.js

const createRouter = () => new Router({
    mode: 'history',
  base: '/admin/', //配置nginx访问结构
})

对应的 nginx 配置文件

http {
   server {
        # 监听的端口号
        listen       9200;
        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  localhost;
        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;
        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            try_files $uri $uri/ /index.html;        
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /admin {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /admin/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #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;
        }
    }
    include servers/*;
}

配置文件参考

参考1

server {
    # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
    listen       8888;
    # 服务名称即部署的IP，生产环境需要改为服务器的公网
    server_name  localhost;
    # 上述端口指向的根目录 即 配置前端打包文件的映射路径
    root /opt/asing1elife/teamnote;
    # 项目根目录中指向项目首页
    index index.html;
    client_max_body_size 20m; 
    client_body_buffer_size 128k;
    # 根请求会指向的页面
    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      # 处理vue单页面应用路由模式为history模式刷新页面404问题
      try_files $uri $uri/ @router;   #try_files $uri $uri/ /index.html $uri/ =404;
      # 请求指向的首页
      index index.html;
    }
    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }
    # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
    # 这里使用 /teamnote/api/ 而不是 /teamnote/ ，是因为前端项目本身的访问链接就是 http:192.168.7.8:8888/teamnote/
    # 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
    location /teamnote/api/ {
          # 后端的真实接口
          proxy_pass http://192.168.7.8:2592/teamnote/api/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}

参考2

    #仓储管理
    server {
      listen       9528;
      server_name  192.168.1.95;
      location / {
        root   /opt/server/store-ui/warehouse-management/dist;
        try_files $uri $uri/ /index.html $uri/ =404;
        index  index.html index.htm;
        add_header X-Content-Type-Options  'nosniff';#禁止嗅探文件类型
        add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' 'unsafe-inline' http://192.168.1.25:7000";#只允许同源下的js
        add_header X-XSS-Protection "1; mode=block";#开启XSS过滤器
      }
    }

Vue项目实战

前端项目打包

配置文件 参考

配置文件参考