vue项目部署在非根路径(vue2 /vue3)

Vite & Vue3

环境变量设置

.env.development和.env.production的文件中新建变量 VITE_APP_ROUTER_BASE

#路由前缀  
VITE_APP_ROUTER_BASE = '/ec/'

配置文件

vite.config.js文件中配置base地址

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
        // 部署生产环境和开发环境下的URL。
        // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
        // 例如 https://www.xxx.xxx/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
        //例如，如果你的应用被部署在 https://www.xxx.xxx/admin/，则设置 baseUrl 为 /admin/。
        base: env.VITE_APP_ROUTER_BASE || '/',
        .....
        }
    })

路由文件router/index.js

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_ROUTER_BASE || '/'),
  routes: [...],
})

其他

如果页面中有使用window.location.href进行跳转，需要调整调整地址
eg:

window.location.href = '/login'
//改为  

window.location.href = import.meta.env.VITE_APP_ROUTER_BASE || '/' + 'login'
//or
router.push({path:'/login})

Vue/Cli & Vue2

环境变量设置

.env.development和.env.production的文件中新建变量 VUE_APP_ROUTER_BASE

#路由前缀  
VUE_APP_ROUTER_BASE = '/ec/'

配置文件

vue.config.js文件中配置publicPath地址

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.xxx.xxx/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
  //例如，如果你的应用被部署在 https://www.xxx.xxx/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.VUE_APP_ROUTER_BASE || "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）

路由文件router/index.js

export default new Router({
  mode: 'history', // 去掉url中的#
  base: process.env.VUE_APP_ROUTER_BASE || '/',
  routes: [...]
})

其他

如果页面中有使用window.location.href进行跳转，需要调整调整地址
eg:

window.location.href = '/login'
//改为  

window.location.href = process.env.VITE_APP_ROUTER_BASE || '/' + 'login'
//or
router.push({path:'/login})

原文地址：https://blog.csdn.net/huanglihui10071030/article/details/136362518

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！