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 计算属性computed的实现原理

    Vue3 计算属性computed的实现原理

    这篇文章主要介绍了Vue3 计算属性computed的实现原理,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-08-08
  • 基于Vue制作组织架构树组件

    基于Vue制作组织架构树组件

    最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于Vue制作组织架构树组件,需要的朋友参考下吧
    2017-12-12
  • 详解滑动穿透(锁body)终极探索

    详解滑动穿透(锁body)终极探索

    这篇文章主要介绍了滑动穿透(锁body),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue+element-ui表格封装tag标签使用插槽

    vue+element-ui表格封装tag标签使用插槽

    这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue2项目中封装echarts地图的优雅方法

    vue2项目中封装echarts地图的优雅方法

    这篇文章主要给大家介绍了关于vue2项目中封装echarts地图的优雅方法,需要的朋友可以参考下
    2022-03-03
  • VUE学习宝典之el-dialog使用示例

    VUE学习宝典之el-dialog使用示例

    在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue element-ui的table列表中展示多张图片(可放大)效果实例

    vue element-ui的table列表中展示多张图片(可放大)效果实例

    这篇文章主要给大家介绍了关于vue element-ui的table列表中展示多张图片(可放大)效果的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue项目适配大屏端的方法示例

    vue项目适配大屏端的方法示例

    众所周知在vue移动端h5页面当中,适配是经常会遇到的问题,这篇文章主要给大家介绍了关于vue项目适配大屏端的相关资料,需要的朋友可以参考下
    2021-08-08
  • 使用elementUI实现将图片上传到本地的示例

    使用elementUI实现将图片上传到本地的示例

    今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论