在部署 vue 项目时,路由模式默认使用哈希 (hash) 模式,但是由于某些原因,要求使用 history 模式。但是对于现在的部署环境则遇到了一个问题。首先是目录:
CODE
site ---- 项目根目录
├── siteA ---- 项目A
│ └── index.html
└── siteB ---- 项目B
└── index.html
即项目放在了同一个根目录下,那么此时我们就需要调整 vue 的一些配置。具体如下
JAVASCRIPT
export default [{
path: '/siteA',
name: 'siteARoot',
component: () => import('@/views/siteA/index'),
children: [
{
path: 'index',
name: 'Index',
meta: {
title: 'siteA'
},
component: () => import('@/views/siteA/index')
}
]
}]
即路由需要包含此项目部署时所需要存放的目录名。
打包配置时由于使用了 history 模式,那么 publicPath
就需要指定绝对路径。
JSON
{
publicPath: /siteA/
}
这里设置的绝对路径即项目配置时的目录名,可通过环境变量进行动态修改。
NGINX
server {
listen 10085;
server_name localhost;
root "D:/code/test/site/";
location /siteA {
index index.html;
try_files $uri $uri/ /siteA/index.html;
}
location /siteB {
index index.html;
try_files $uri $uri/ /siteB/index.html;
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。