Vue History 模式配置文档

Vue History 模式配置文档

一、前端配置

以下示例假设项目访问路径为 /main-app/。

1. vue.config.js

module.exports = {
  publicPath: '/main-app/',
  outputDir: 'dist'
};

publicPath 必须与实际访问前缀保持一致，否则静态资源路径会错误。

2. 路由配置

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: '/main-app/',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

mode 必须设置为 history，base 必须与 publicPath 保持一致。

二、Nginx 配置

以下示例假设打包后的文件部署在 /iplm/main-app/，且该目录下直接包含 index.html、js/、css/ 等文件。

server {
    listen 9002;
    server_name 10.201.3.131;

    location = /main-app {
        return 301 /main-app/;
    }

    location /main-app/ {
        root /iplm;
        index index.html;
        try_files $uri $uri/ /main-app/index.html;
    }
}

配置说明：

• location = /main-app：将不带结尾斜杠的访问统一重定向到 /main-app/
• location /main-app/：处理该项目下的所有请求
• try_files $uri $uri/ /main-app/index.html;：当请求不是实际静态文件时，回退到 index.html，交由前端路由处理

三、部署目录结构

/iplm/main-app/index.html
/iplm/main-app/js/...
/iplm/main-app/css/...
/iplm/main-app/img/...

四、配置一致性要求

• 前端 publicPath 必须是 /main-app/
• 前端路由 base 必须是 /main-app/
• Nginx location 前缀必须是 /main-app/
• 部署目录必须与 Nginx 指向路径一致

如果项目不是部署在 /main-app/，只需要把以上配置中的 /main-app/ 统一替换为实际访问前缀即可。