在Vue3和Vue2中配置 base 和 publicPath (应用要被部署在一个子路径上)

假设需要部署到 '/app' 路径下

Vue2中可以在 vue.config.js 文件中这样配置：

module.exports = {
  publicPath:'/app/',
};

Vue3中可以在 vite.config.js 文件中这样配置：

export default defineConfig({
  base: '/app/', // 这个类似 Vue 2 中的 publicPath
});

如果是在hash路由模式下部署

在Vue2 中设置路由模块

import Router from 'vue-router'
export default new Router({
  mode: 'hash', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

在Vue3 中设置路由模块

import routes from './routes'
import {
  createRouter,
  createWebHashHistory,
} from 'vue-router'

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes.constantRoutes,
})

export default router

如果希望去除路径中的' #' 号,可以进行如下配置

在Vue2中设置路由模块

import Vue from 'vue';
import Router from 'vue-router';
import { constantRoutes } from './routes';  // 你的路由配置文件

Vue.use(Router);

export default new Router({
  mode: 'history',  // 使用 HTML5 History 模式
  base: '/app',  // 设置路由的基础路径为 '/app'
  scrollBehavior: () => ({ y: 0 }),  // 页面滚动到顶部
  routes: constantRoutes,  // 定义你的路由表
});

在Vue3中设置路由模块

import { createRouter, createWebHistory } from 'vue-router';
import { constantRoutes } from './routes';  // 你的路由配置文件

export const router = createRouter({
  history: createWebHistory('/app'),  // 使用 HTML5 History 模式并设置基础路径为 '/app'
  routes: constantRoutes,            // 定义你的路由表
  scrollBehavior: () => ({ y: 0 }),  // 页面滚动到顶部
});