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

如：
linux 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 后面对应的是真实的静态资源（必须存在）文件目录

nginx 配置举例

如上图我们想映射 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;	
	}

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

# nginx # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue