避坑指北：vue 使用 history 路由

原创

Qwe7

发布于 2022-02-12 18:22:43

3940

发布于 2022-02-12 18:22:43

文章被收录于专栏：网络收集网络收集

背景

在部署 vue 项目时，路由模式默认使用哈希 (hash) 模式，但是由于某些原因，要求使用 history 模式。但是对于现在的部署环境则遇到了一个问题。首先是目录：

CODE

site ---- 项目根目录
 ├── siteA ---- 项目A
 │   └── index.html
 └── siteB ---- 项目B
     └── index.html

即项目放在了同一个根目录下，那么此时我们就需要调整 vue 的一些配置。具体如下

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 配置

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 删除。

html