vue项目设置打包后的静态文件访问路径-IT俱乐部

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静态文件访问路径内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

IT俱乐部

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

目录