vue-历史模式部署

项目部署

本项目采用nginx进行部署,历史模式的部署需要服务端的配合,本次采用nginx进行配合。

1 配置

bash 复制代码
const basePath = process.env.VUE_APP_BASE_PATH;
module.exports = {
  publicPath: basePath #静态资源的路径 /ecology/
}

2 创建路由

bash 复制代码
const createRouter = baseRouter => {
  const router = new VueRouter({
    #/ecology 
    base: baseRouter || process.env["VUE_APP_BASE_PATH"].slice(0, -1),
    mode: "history",
    routes: [...constantRoutes, ...asyncRoutes]
  });
  return router;
};

3 nginx配置

bash 复制代码
location /ecology {
  root html;
  index index.html index.htm;
  #这个配置的含义为:当请求到这个路径下面时/ecology/main/overview 会首先去这个路径下访问index.html如果有则返回这个静态资源
  #如果没有 继续向后匹配 nginx内部重新定向到 /ecology/indexl.html 这样的话就相当于重定向到了首页,此时携带了路径参数/main/overview,就会触发vue路由的工作。其实这样也可以只写/ecology/index.html就已经完全足够。
  try_files  $uri $uri/  /ecology/index.html; 
}

http://11.2.19.11:8088/ecology/main/overview

$uri:/ecology/main/overview

$request_uri:http://11.2.19.11:8088/ecology/main/overview

try_files: 官方文档

特别注意的是:静态资源路径,路由路径和nginx Location的路径一定要保持一致。

相关推荐
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
天天进步20157 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html