vue-router路由history模式+nginx部署项目到非根目录下(实践版)

2022-10-27 09:31:33

你总是心太软心太软
独自一个人研究到天亮
你无怨无悔的疯狂找寻
我知道你根本没那么坚强
你总是心太软心太软
把所有问题都自己扛
问题总是太多解决太难
不是你的就别再勉强
夜深了你还不想睡
你还在想着他吗
你这样执着到底累不累
明知他不会那么容易
只不过想早点睡一觉
可惜他无法给你机会
翻遍网络没有想要结果
喔,算了吧。。。。。
不我还要再找找

最近经历了如上歌词的生活，大致是这样的：开发一个项目，发现使用hash 老是带有一个#号，如localhost:8080/#/这样始终够美观，于是就想着往往history 模式部署项目，当然第一步就是去VUE CLI官网瞅瞅啦,人家早就预料到你会有这样的操作，文档早就准备好了

1、于是比着官网开始了一通配置

1.1、将vue.config.js 修改成这样

  publicPath: process.env.NODE_ENV === "production" ? "/hehuh5/" : "/",
  outputDir: 'hehuh5',

1.2、router 修改成这样子

const routes = [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/rangeMan',
    name: 'rangeMan',
    component: RangeMan
  },
  {
    path: '/pass_edit',
    name: 'Pass_edit',
    component: Pass_edit
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

于是叮叮咚咚打包发布到nginx 去测试

1.3、接着把nginx的config.nginx改成这个样子

location /hehuh5 {
	root html; //你自己的根目录地址
	index index.html index.htm;
	try_files $uri $uri/ /hehuh5; //这里的 / hehuh5/ 项目目录
}

打包后
localhost:8080/hehuh5/没问题是主页面
但是输入其他子页面都会被转到主页面
如 localhost:8080/hehuh5/rangeMan
还是 localhost:8080/hehuh5/pass_edit 也好
就是无法找到子路由

2、搜索了一篇文章有人说这样子可以

const routes = [{
    path: '/hehuh5 ',
    name: 'home',
    component: Home
  },
  {
    path: '/hehuh5/rangeMan',
    name: 'rangeMan',
    component: RangeMan
  },
  {
    path: '/hehuh5/pass_edit',
    name: 'Pass_edit',
    component: Pass_edit
  },
]

我照改了运行依然没对

3、于是再找，有人说添加子路由，像这样子

location /abc.html{
	alias /opt/abc/abc.html; 
	try_files $uri $uri/ /abc/abc.html;  
}  
location /def.html {
	alias /opt/abc/def.html;
	try_files $uri $uri/ /abc/def.html; 
}

我改成了如下，可是还是没对，可能是没改对吧

location /hehuh5 {
	root html; //你自己的根目录地址
	index index.html index.htm;
	try_files $uri $uri/ /hehuh5; //这里的 / hehuh5/ 项目目录
}
location /hehuh5/rangeMan {
	root html; //你自己的根目录地址
	index index.html index.htm;
	try_files $uri $uri/ /hehuh5/rangeMan; //这里的 / hehuh5/ 项目目录
}

4、再次看见有人部署在根目录下于是试了一下，把vue.config.js改到根目录

  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

router 还是改成这个样子

const routes = [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/rangeMan',
    name: 'rangeMan',
    component: RangeMan
  },
  {
    path: '/pass_edit',
    name: 'Pass_edit',
    component: Pass_edit
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

nginx 改成这个样子

location / {
	root html; 
	index index.html index.htm;
	try_files $uri $uri/ /index.html; 
}

测试这样是没问题的，可是这不是我要的结果，不想部署到根目录(根目录被其他应用占了)

这找得都忘记了天寒地冻00点了没办法，只好睡去…

5、再次开始

天亮再次开始找寻答案…

不晓得转悠了好久发现一个有点相似的nginx 配置, 参考过如下版本

vue + nginx服务器+history模式多也i面路由正确配置

vue多文件配置子页面路由 history

最终经过不懈努力也感谢各位网友分享，从中受到了启发，将配置改成如下，得以成功配置圆满解决问题，下面是所有配置步骤

51、vue.config.js配置

  publicPath: process.env.NODE_ENV === "production" ? "/hehuh5/" : "/",
  outputDir: 'hehuh5product',

5.2、router配置

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/pass_edit',
    name: 'Pass_edit',
    component: Pass_edit
  },
  {
    path: '/rangeMan',
    name: 'rangeMan',
    component: RangeMan
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

5.3 、nginx配置

window版本

		location /hehuh5 {
			alias /develop/hehu_ol/hehuh5product;
			try_files $uri $uri/ /hehuh5/index.html;
			index index.html index.htm;
		}

Linux 版本配置

	location /hehuh5 {
       	alias /opt/html/hehuh5product;
		try_files $uri $uri/ /hehuh5/index.html;
		index index.html index.htm;	
	}

还有像这样配置也行

	location ^~ /hehuh5 {
			alias /develop/hehu_ol/hehuh5product;
			index index.html; #默认访问的文件
			try_files $uri $uri/ /hehuh5/index.html; #目录不存在则执行index.html
		}

结束语
好了问题记录完成，其实这个nginx 配置和原本的静态资源配置还是有很大区别，nginx静态资源，root 对应的是静态资源的文件夹目录，location 后面对应的其实是一个实实在在的文件目录
如

location /hehuh5 {
	root html;
	index index.html index.htm;
}

这个如果是静态的html 那么hehuh5这个目录就必须在html 目录下面能找到, 而history 模式时并不需要试试在在的存在这个目录，只需要在vue.config.js和vue-router对应的配置就可以了，root 指向的是项目**outputDir: ‘hehuh5product’,**打包后对应的目录

可能当是就是因为这个一直转不出这个圈来

码农公寓