vue配置静态路径后使用history模式配置nginx

news/2024/7/10 1:19:11 标签: nginx, vue, history, publicPath

后端说要加一个路径的前缀(/mp)。

本来可以在vue3-4(vue.config.js里面配置publicPath)或者在vue2.0(config里面index.js配置assetsPublicPath)

但是项目用了history模式,用的nginx代理,然后就打包找不到页面了,然后就照着官网的说明开始配,配置如下:

server {
    listen 9009;
    server_name localhost;

   location /prepaidApi {         # 这是配置反向代理的接口前缀
	   client_max_body_size 10m;
	   proxy_set_header Host $http_host;
	   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	   proxy_pass  http://192.168.0.111:8000/;      # 后端接口ip
    }
  
	location /mp {    # 这是静态的路径前缀
		alias D:/zhh/pre-wx/dist/;        # 这是项目所在地址
		index index.html;
		try_files $uri $uri/ /mp/index.html;    # 这是配置history
	}    
}

你以为到这里就完了吗,不!还要在路由里面配一下base: '/mp',要不你还是找不到页面。


路过若有大神,请不吝赐教~


http://www.niftyadmin.cn/n/1845334.html

相关文章

编辑表格时弹窗里的el-form数据清空

// 弹窗里的表格绑定数据 dialogForm:{buyNum: ,energyName: ,storeNum: , },// 新增 handleAdd(){this.dialogForm this.$options.data().dialogFor },

解决vue不是内部或外部命令

先说一下,我采用了热心网友的哪些做法: 1. 试图全局配置 vue 的环境变量,找到 vue.cmd 的路径,然后进行配置。 问题:在文件搜索中,没有找到 vue.cmd,失败。 在 C:\Users\ada\AppData\Roaming…

iOS开发UI篇—九宫格坐标计算

一、要求 完成下面的布局 二、分析 寻找左边的规律,每一个uiview的x坐标和y坐标。 三、实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图。 (3)可以先尝试逐个的添加格子&…

vue点击tab列表滚动对应位置,滚动列表也可切换tab

先看看效果&#xff1a; <template><div class"custom-demo-view" style"padding: 1rem;"><div><el-tabs v-if"reload" v-model"tabIndex" tab-click"jump"><el-tab-pane :label"tabs[0].t…

HTML美化修饰A

<HTML><HEAD><META http-equiv"Content-Type" content"text/html; charsetgb2312"><TITLE>TABLE的美化修饰</TITLE></HEAD> <BODY><TABLE width"957" border"0" background"images…

Json.Net 序列化 IPAddress 或 IPEndPoint

原文: http://stackoverflow.com/questions/18668617/json-net-error-getting-value-from-scopeid-on-system-net-ipaddress class IPAddressConverter : JsonConverter {public override bool CanConvert(Type objectType){return (objectType typeof(IPAddress));}public ov…

react在setState之后数据没变化(setState同步还是异步)

场景是这样的&#xff1a; 我有一个分页列表的场景&#xff0c;目前在点击页码之后&#xff0c;将这个页码setState&#xff0c;然后调用分页接口&#xff0c;如下&#xff1a; // 这是antd的分页上的 onChange事件 const onChange (page, pageSize) > {this.setState({cur…