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

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

最近经历了如上歌词的生活，大致是这样的：开发一个项目，发现使用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

---

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

5.1、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版本（适合本地测试）

因为上面vue.config.js 中的outputDir配置是hehuh5product 所以build后会在项目目录生成对应的文件hehuh5product
如：

我为了nginx 测试方便，直接将目录映射到了开发的项目根目录下，如
/develop/hehu_ol/hehuh5product

最后的nginx 配置就是这样的了：

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

• Linux 版本配置

这个 /opt/html/hehuh5product 配置就很简单了，直接把build后的hehuh5product 拷贝到对应的opt目录下的html中就可以了。

如：

最后nginx /config/nginx.conf 做如下配置

	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
		}

【结束语】
好了问题解决了，根据这次经历，明白了一个问题，我们在发布vue项目时

---

1）hash 模式

如router 使用hash 的方式进行访问，那么nginx配置中 root 后面应该是静态资源的文件夹（上级）目录，location 后面对应的是真实的静态资源（必须存在）文件目录

如上图我们想映射 hehuAdmin，那么nginx配置应该是

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

就是说location /hehuAdmin 后面的 **hehuAdmin **这个目录就必须在html 目录下面能找到的

---

2） history 模式

而history 模式时，location /hehuAdmin 后面的hehuh5并不需要实实在存在这个目录，只需要在vue.config.js和vue-router做对应的(publicPath和base)配置就可以了

最后使用别名alias 指向真实的静态资源，如alias /opt/html/hehuh5product; 指向的是html 目录下的 hehuh5product文件夹

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

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