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的路径一定要保持一致。

相关推荐
要加油哦~5 分钟前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15881 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表3 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子4 小时前
Next.js 入门指南
开发语言·javascript·next.js