首页 > 其他分享 >npm+vue打包静态文件+端口转发

npm+vue打包静态文件+端口转发

时间:2024-03-07 17:11:49浏览次数:20  
标签:npm index vue set 端口 header html proxy location

先说要点,再show code

1,nginx转发不要填写127.0.0.1,localhost等ip地址

2,location根路径要加try_file选项,请求转发到index.html

3,如果有path有/,那就都带上/

 

我的nginx.conf

#user  root;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8081;
        server_name  localhost;
        
        root   C:\Users\Administrator\Documents\s-ui\dist;
        index  index.html index.htm;
         
        location /prod-api/ {
             proxy_http_version 1.1;    
                   proxy_set_header Connection "";
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass http://192.168.8.100:8080/;
        }

        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            try_files $uri $uri/ /index.html;  #匹配项目的入口页,前面必须加/
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

 

标签:npm,index,vue,set,端口,header,html,proxy,location
From: https://www.cnblogs.com/difs/p/18059324

相关文章

  • vue项目引入自定义svg
    图标可以使用element-ui的图标库、第三方的图标库或者引入svg使用,这里是讲如何使用自定义的svg。将SVG图标放入项目 自定义的svg可以访问 https://www.iconfont.cn地址,搜索你想要的图标,下载SVG格式,放入项目的src/assets/icons/svg文件夹中。并在src/assets/icons/index.js......
  • 若依集成CIM(即时推送系统)实现将服务端修改为SpringBoot+Vue前后端分离版(文末见代码
    ​ 场景若依前后端分离版本地搭建开发环境并运行项目的教程:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 CIMGitee地址:https://gitee.com/farsunset/cimCIM项目是基于mina或者netty框架下的推送系统,我们平常使用第三方的推送SDK,如极光推送,百度......
  • Vue学习笔记38--单文件组件
    单文件组件命名规则如下所示:------单个单词命名规则:------方式一:temp.vue方式二:Temp.vue建议使用(可和vue开发者工具呼应)------多个单词命名规则------方式一:my-temp.vue方式二:MyTemp.vue建议使用(可和vue开发者工具呼应)组件交互相关的代码暴露方式:1.分别暴露:exportconst......
  • Vue+Axios的方法异步回调顺序问题
    一、问题阐述有的时候我们需要控制异步函数的执行顺序,比如a方法中如果要用到异步函数b方法的请求结果,就需要进行顺序控制,否则a函数先执行就会导致找不到数据直接报错。二、方法1.异步控制1.1.async,await等做异步控制1.2修改函数放置位置达到异步控制效果(我遇到的情况无效,但......
  • vue_居中左对齐
    div中文本居中对齐后,然后再左对齐如下效果:===============================22345645=================2345678987654============12========================================= <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8......
  • Vue调试神器vue-devtools配置 / 解决提示 Download the Vue Devtools extension for a
    访问Vue页面,控制台提示:    ......
  • vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量
    vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量,页面元素也会响应式生效在Vue2项目中,store中的状态默认情况下是不具备响应式的特性的。这是因为Vue2.x使用的是基于对象定义的Vue.observable()来创建响应式对象,而store中的状态是通......
  • Vue学习笔记37--内置关系
    示例一:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>一个重要的内置关系</title>......
  • vue使用超图openlayers调用mapv实现蜂窝图
    在用超图openlayer开发的时候遇到问题,在此作为记录。文字描述不对的地方请多担待, 下载依赖,npmimapv 按需引入,因为官网例子是普通的html引入,{mapv}引入方式调用的是超图@supermap中的方法。DataSet是mapv的方法 import{Mapv} from'@supermap/iclient-ol/overla......
  • npm报错:request to https://registry.npm.taobao.org failed, reason certificate ha
    NPM使用遇到错误:错误原因:淘宝镜像过期解决方案:​ 1.查看当前npm设置:npmconfiglist​ 2.清空缓存:npmcacheclean--force​ 3.修改npm为淘宝镜像:npmconfigsetregistryhttps://registry.npmmirror.com​ 4.再次查看npm设置,已经修改为淘宝镜像)​ 问题解决......