vue3.0 history模式打包,服务器子目录访问配置

目前使用hash模式#遇到的问题

1. vue项目访问路径带#的话，在服务端跳转vue页面时传参数参数位置将会被带到 # 值后面。
2. 发送短信时，如果短信中推荐链接含有 # 的话，此 # 及其以后的内容将不会被解析成url链接。

为了解决以上遇到的问题，翻阅资料最终实现了history模式打包，并且访问页面。

打包时配置如下：

1. vue项目中vue.config.js

const BASE_URL = process.env.NODE_ENV === 'production' ? '/web/static/' : '/'

2. vue项目中router.js

const router = new Router({
  	mode: 'history',
 	base: '/web/static',
 	routes: []
 })

3.nginx配置文件nginx.conf中，vue的路由hash模式可以将访问路由由逻辑地址转为物理地址，而history模式没有处理，此时需要通过代理重定向物理访问地址

	# vue history模式nginx配置
	server {
        listen       80;
        server_name  convenients.code.com;#自己本地可以写成127.0.0.1
		location / {
			root   convenients;
			try_files $uri $uri/ /index.html;
			# 这里rewrite ，如果在上面第一步在打包时处理了，就不用了
			#rewrite ^/assets/(.*)$ /web/static/assets/$1 break;
		}
    }

文件打包放在nginx的目录如下

浏览器访问地址如下

参考链接