vue项目设置打包后的静态文件访问路径

 更新时间:2024年02月23日 16:36:52   作者:start_sea  
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下

vue项目设置打包后的静态文件访问路径

**啰嗦一下:**相同域名下可能会存在两份相关或不相关的代码,需要通过切换文件夹路径进入不同项目时,需要在项目打包输出代码时设置静态文件的访问路径(vue、react都要)。这种方式可能不太好,但是确实存在这种场景。

**静态文件访问路径说明:**项目的静态文件访问路径在本地运行和服务器访问是有区别的,默认状态下服务器上的项目代码,访问路径是从服务器根目录开始。

**H5中的访问设置:**在H5中,静态文件访问路径的区别
1、服务器根目录访问:代码中书写静态文件路径时开头不加“./”。
2、访问当前文件夹:代码中书写静态文件路径时加“./”。

vue项目的静态文件访问设置:
vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置。
1、vue.config.js文件中,module.exports中没有配置publicPath属性时,默认静态文件通过服务器根目录访问。
2、vue.config.js文件中配置publicPath属性设置静态文件访问路径。

module.exports = {
    publicPath: './',
    devServer:{
        hot: true,
        port: 8082, // 启动端口
        open: true,  // 启动后是否自动打开网页
    },
}

在这里插入图片描述

publicPath属性值为“./”时表示静态文件的引入路径为当前文件夹,设置之后,可以将整个项目代码随便移动文件夹位置而不影响静态文件的访问。

补充:

vue+electron 修改默认安装目录

1. 在package.json或vue.config.js文件中, 在nsis 添加 include 属性:

module.exports = {
  pluginOptions: {
    electronBuilder: {
         win: {
          icon: './icons/icon.ico',
          target: [
            {
              target: 'nsis',
              arch: [
                'ia32'
              ]
            }
          ],
         },
         ...
         nsis: {
          // 一键安装,如果设为true,nsis设置就无意义请直接删除 nsis 配置
          oneClick: false,
          // true全用户安装【目录为:C:\Program Files (x86)】,false安装到当前用户
          perMachine: true,
          // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
          allowElevation: true,
          // 允许修改安装目录
          allowToChangeInstallationDirectory: true,
          // 创建桌面图标
          createDesktopShortcut: true,
          // 创建开始菜单图标
          createStartMenuShortcut: true,
          // 快捷方式的名称,默认为应用程序名称
          // shortcutName: 'HX',
          // 安装图标
          installerIcon: './icons/icon.ico',
          // 卸载图标
          uninstallerIcon: './icons/icon.ico',
          // 安装时头部图标
          installerHeaderIcon: './icons/icon.ico',
          // 配置 nsn 如修改默认安装目录
          include: './installer.nsh'
        }
        ...
      }
    }
  }
}
 

2. 根目录新建 installer.nsh 文件:

installer.nsh 一般和vue.config.js为同级目录

D:\Program Files (x86) 为定义安装目录,可修改 

${PRODUCT_NAME} 为应用名称变量,一般没不需要改 

!macro preInit
  SetRegView 64
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files\${PRODUCT_NAME}"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files\${PRODUCT_NAME}"
  SetRegView 32
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files (x86)\${PRODUCT_NAME}"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files (x86)\${PRODUCT_NAME}"
!macroend

到此这篇关于vue项目设置打包后的静态文件访问路径的文章就介绍到这了,更多相关vue静态文件访问路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue3.x中组件间参数传递的示例代码

    详解Vue3.x中组件间参数传递的示例代码

    在 Vue3.x 中,组件间的参数传递是构建复杂应用时不可或缺的一部分,无论是父子组件还是兄弟组件之间,合理的数据流动都是保持应用状态一致性和可维护性的关键,本文将通过示例代码,详细介绍 Vue3.x 中组件间如何传递参数,需要的朋友可以参考下
    2024-03-03
  • elementUI给el-tabs/el-tab-pane添加图标效果实例

    elementUI给el-tabs/el-tab-pane添加图标效果实例

    这篇文章主要给大家介绍了关于elementUI给el-tabs/el-tab-pane添加图标效果实例的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue3中引入scss文件的方法步骤

    Vue3中引入scss文件的方法步骤

    这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下
    2023-08-08
  • Vue-less的使用和deep深度选择器详解

    Vue-less的使用和deep深度选择器详解

    这篇文章主要介绍了Vue-less的使用和deep深度选择器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 如何在vite里获取env环境变量浅析

    如何在vite里获取env环境变量浅析

    开发中经常会使用环境变量,Vite相比于Webpack也有一定的变化,下面这篇文章主要给大家介绍了关于如何在vite里获取env环境变量的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue Router参数传递的多种方式小结

    Vue Router参数传递的多种方式小结

    在 Vue.js 开发中,vue-router 是构建单页面应用(SPA)的核心工具之一,它不仅能帮助我们管理路由,还能在不同页面之间传递参数,本文将详细介绍 vue-router 中常见的参数传递方式,并通过实际示例帮助你快速掌握这些技巧,需要的朋友可以参考下
    2025-04-04
  • Vue.js element-plus使用图标不显示问题的解决方式

    Vue.js element-plus使用图标不显示问题的解决方式

    近期在学习Vue时用elementUI时发现图标在页面上显示不出来,所以这篇文章主要给大家介绍了关于Vue.js element-plus使用图标不显示问题的解决方式,需要的朋友可以参考下
    2022-09-09
  • 分享Vue组件传值的几种常用方式(二)

    分享Vue组件传值的几种常用方式(二)

    这篇文章主要介绍了分享Vue组件传值的几种常用方式,文章围绕主题斩开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • 使用vue点击li,获取当前点击li父辈元素的属性值方法

    使用vue点击li,获取当前点击li父辈元素的属性值方法

    今天小编就为大家分享一篇使用vue点击li,获取当前点击li父辈元素的属性值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    Vue实现鼠标经过文字显示悬浮框效果的示例代码

    这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论