示例项目地址:http://172.00.00.000:8888/Web/static/index.html/index ,其中:
/Web/static/ 表示项目部署路径,每个人的路径不一样,vue默认路径是根路径/,如果你项目不是部署在根路径,那就需要修改一些配置
index.html 表示项目入口文件
/index 表示项目首页的路由地址

vue前端配置
1.配置路由history模式并配置base

const router = new VueRouter({
  routes,
  mode: 'history', // 必须,将路由改为history模式
  base: '/Web/static/index.html/' // 可选,默认为/表示根路径,如果你的项目部署在根路径则不需要配置这个属性,否则需要像这样配置,这样在history模式下每次路由跳转都会将这个base值加入url里面
})

2.vue.config.js中修改publicPath属性

// vue.config。js
module.exports = {
  publicPath: '/Web/static/' // 可选,默认值为/表示根路径,如果你的项目部署在根路径则不需要配置这个属性,否则需要像这样配置,这样在history模式下会去往这个绝对路径寻找静态资源
}

当然前面的配置都是基于生产环境,要想不影响开发环境,可以判断一下:

base: process.env.NODE_ENV === 'production' ? '/Web/static/index.html/' : '/'
publicPath: process.env.NODE_ENV === 'production' ? '/Web/static/' : '/'

后端配置
history模式需要后端配合,具体的后端配置可以在网上找到,方法是获取不到资源时将url重写到 /index.html
特别注意的是,如果你的项目没有部署在根路径,那么你需要写入完整路径,例如 /Web/static/index.html

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐