首页
前端开发
Webpack
Vue.js 路由配置与部署：解决打包后视图无法显示问题

Vue.js 路由配置与部署：解决打包后视图无法显示问题

18 次浏览 0 条评论
pdf
pdf

使用 Vue-cli 构建的项目在打包部署后，可能会遇到路由视图无法正常显示的问题，即使静态资源加载成功。这通常是由于路由配置中的 base 属性设置不正确导致的。

解决方案：

在路由配置文件中，将 VueRouter 实例的 base 属性设置为与部署路径一致的根目录。例如，如果将打包后的文件放置在服务器的 /system/ 目录下，则 base 属性应设置为 /system/：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: '/system/', // 设置为部署路径的根目录
  scrollBehavior: () => ({ y: 0 }),
  routes
})

通过设置正确的 base 属性，确保路由能够正确解析，从而解决视图无法显示的问题。

pdf 文件大小：29.88KB