已有Vue3项目支持history与hash两种模式路由

已有Vue3项目支持history与hash两种模式路由

如果是vite创建的项目，一般根目录会有个vite.config.js或ts的文件。

场景是需要将Vue3项目嵌入到APP内部，作为文件直接使用，那么vite默认的根路径就会在设备上挂掉。

创建一个额外的vite配置文件

view.embed.config.js

import { defineConfig } from 'vite'
import baseConfig from './vite.config'

// https://vitejs.dev/config/
export default defineConfig({
  ...baseConfig,
  base: './',
})

主要就是提供一个base的相对路径，提供给import.meta.env.BASE_URL使用。

路由处做一个简单处理

const router = createRouter({
  history: import.meta.env.BASE_URL !== '/' ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
})

根据是否使用了根路径，也就是可以区分是否为指定路径，指定路径包含了当前相对路径。

绝对路径则使用普通history模式，一般用在有服务器，如网站上。

相对路径一般用在嵌入场景。

修改页面内资源引用

假设原来的资源是'/images/a.png'​，现在需要换成import.meta.env.BASE_URL + '/images/a.png'​，这样就可以在不同场景下使用不同的路径。

其他引用方案同样修改即可，越早改动越好。