脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue打包配置相对路径

vue打包配置相对路径实现过程

 更新时间：2025年11月08日 09:00:06   作者：银白色 ？  
文章主要讨论了在Vue项目中配置请求拦截器的`baseUrl`以及Vue Router的`base`属性的一致性问题,无论是使用hash模式还是history模式,相对路径都必须通过hash模式来确保正确性

vue打包配置相对路径

router/index.js

const router = new VueRouter({
  // 注销mode默认会启用hash模式，放开mode启用history模式
  mode: "hash", // require service support
  routes,
  // base: "./",
});

vue.config.js

module.exports = {
  // outputDir: "dist",
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss],
      },
    },
  },
  // 打包生成的静态资源 (js、css、img、fonts) 的目录
  assetsDir: './assets',
  publicPath: "",
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
}

请求拦截的baseUrl，router的base是否一致，配置成一致即可。

相对路径必须使用hash才有效，如果是history模式页面就不显示了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    这篇文章主要给大家介绍了关于vue项目中使用vue-i18n报错的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 在Vue-cli里应用Vuex的state和mutations方法

    在Vue-cli里应用Vuex的state和mutations方法

    今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中使用定时器(setInterval、setTimeout)的两种方式

    Vue中使用定时器(setInterval、setTimeout)的两种方式

    js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout，这篇文章主要介绍了Vue中使用定时器 （setInterval、setTimeout）的两种方式,需要的朋友可以参考下
    2023-03-03
  • Vue中混入mixin的用法介绍

    Vue中混入mixin的用法介绍

    混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-10-10
  • Vite打包项目后图片丢失的简单解决方法

    Vite打包项目后图片丢失的简单解决方法

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的情况,下面这篇文章主要给大家介绍了关于Vite打包项目后图片丢失的简单解决方法,需要的朋友可以参考下
    2023-05-05
  • 前端vue3 setup使用教程

    前端vue3 setup使用教程

    这篇文章主要为大家介绍了前端vue3架构setup使用教程，详细介绍 setup 的用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-02-02
  • Vue时间轴 vue-light-timeline的用法说明

    Vue时间轴 vue-light-timeline的用法说明

    这篇文章主要介绍了Vue时间轴 vue-light-timeline的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue渲染器设计实现流程详细讲解

    Vue渲染器设计实现流程详细讲解

    在浏览器平台上，用它来渲染其中的真实DOM元素。渲染器不仅能够渲染真实的DOM元素，它还是框架跨平台能力的关键。所以在设计渲染器的时候一定要考虑好自定义的能力
    2023-01-01
  • vue项目在线上服务器访问失败原因分析

    vue项目在线上服务器访问失败原因分析

    这篇文章主要介绍了vue项目在线上服务器访问失败原因分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • VUE中v-on:click事件中获取当前dom元素的代码

    VUE中v-on:click事件中获取当前dom元素的代码

    这篇文章主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下
    2018-08-08

最新评论