首页 > 系统相关 >nginx配置vue打包npm build的静态页面

nginx配置vue打包npm build的静态页面

时间:2023-03-29 11:22:57浏览次数:40  
标签:npm vue log html nginx 404 proxy error location

nginx 配置vue项目

server
{
    listen 8081;
    server_name 10.8.8.8;
    index index.html;
    root /home/www/crm/vue/dist;

    #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置,可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/10.8.8.8.conf;
    #REWRITE-END

    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location ^~/stage-api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_read_timeout 6000s; proxy_set_header   Host    $host:$server_port;
        proxy_set_header   X-Real-IP   $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        sendfile on;   # 开启高效文件传输模式
        autoindex on;  # 开启目录文件列表
        autoindex_exact_size on;  # 显示出文件的确切大小,单位是bytes
        autoindex_localtime on;  # 显示的文件时间为文件的服务器时间
        charset utf-8,gbk;  # 避免中文乱码
   }

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/10.8.8.8.log;
    error_log  /www/wwwlogs/10.8.8.8.error.log;
}

 

标签:npm,vue,log,html,nginx,404,proxy,error,location
From: https://www.cnblogs.com/init-007/p/17268222.html

相关文章

  • 思考 React Hook 和 Vue 组合式 API
    Vue组合式API优化周期函数Vue2比如mounted周期中有很多获取数据的逻辑都在这里,在updated周期中又有很多更新的逻辑在这里。在老版本的Vue3文档中讲解组合式AP......
  • 一篇搞定Nginx功能
    from:https://mp.weixin.qq.com/s/yF5h7dslESaa3Gt5rE6IbQ 引言一、性能怪兽-Nginx概念深入浅出二、Nginx环境搭建三、Nginx反向代理-负载均衡四、Nginx动静分离......
  • 第十篇 vue - 基础 -事件处理
    监听事件我们可以使用v-on指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。用法:v-on:click="methodName"或@click="handler"事件处理器的值可......
  • 若依框架-Vue实用框架(权限控制和页面渲染)(四)
    Vue实用框架(权限控制和页面渲染)路由的组成前端token获取那一步中有一块内容,只是简单提了一下,但其实实际涉及到的内容很多: 用户信息的获取第一步的GetInfo后端接口不......
  • 第九篇 vue - 基础 - 列表渲染
    v-for我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用iteminitems形式的特殊语法,其中items是源数据的数组,而item是迭代项的别名dat......
  • 第八篇 vue - 基础 - 条件渲染
    v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染<h1v-if="awesome">Vueisawesome!</h1>v-else你也可以使用v-else为v-i......
  • 第六篇 vue - 基础 - 计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象exportdefault......
  • 第五篇 vue - 基础 - 响应式基础
    声明响应式状态选用选项式API时,会用data选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数Vue将在创建新组件实例的时候调用此函数,并将函数返回的对象......
  • 第七篇 vue - 基础 - 类与样式绑定
    Class与Style绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表和内联样式。因为class和style都是attribute,我们可以和其他attribute一样使用v-bind......
  • 一文剖析:LVS/Nginx/HAProxy原理及应用场景
    负载均衡已经发展成为网络架构中的基础核心组件,消除了服务器单点故障,可以进行请求流量分流,提升冗余,保证服务器的稳定性。在开源的软件负载均衡中,应用最为广泛的有LVS、Nginx......