快捷導(dǎo)航

vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑

更新時(shí)間：2024年02月23日 16:36:52 作者：start_sea

這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過(guò)打包輸出,靜態(tài)文件的訪問(wèn)路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑

**啰嗦一下：**相同域名下可能會(huì)存在兩份相關(guān)或不相關(guān)的代碼，需要通過(guò)切換文件夾路徑進(jìn)入不同項(xiàng)目時(shí)，需要在項(xiàng)目打包輸出代碼時(shí)設(shè)置靜態(tài)文件的訪問(wèn)路徑（vue、react都要）。這種方式可能不太好，但是確實(shí)存在這種場(chǎng)景。

**靜態(tài)文件訪問(wèn)路徑說(shuō)明：**項(xiàng)目的靜態(tài)文件訪問(wèn)路徑在本地運(yùn)行和服務(wù)器訪問(wèn)是有區(qū)別的，默認(rèn)狀態(tài)下服務(wù)器上的項(xiàng)目代碼，訪問(wèn)路徑是從服務(wù)器根目錄開(kāi)始。

**H5中的訪問(wèn)設(shè)置：**在H5中，靜態(tài)文件訪問(wèn)路徑的區(qū)別
1、服務(wù)器根目錄訪問(wèn)：代碼中書寫靜態(tài)文件路徑時(shí)開(kāi)頭不加“./”。
2、訪問(wèn)當(dāng)前文件夾：代碼中書寫靜態(tài)文件路徑時(shí)加“./”。

vue項(xiàng)目的靜態(tài)文件訪問(wèn)設(shè)置：
vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過(guò)打包輸出，靜態(tài)文件的訪問(wèn)路徑需要在vue.config.js文件中設(shè)置。
1、vue.config.js文件中，module.exports中沒(méi)有配置publicPath屬性時(shí)，默認(rèn)靜態(tài)文件通過(guò)服務(wù)器根目錄訪問(wèn)。
2、vue.config.js文件中配置publicPath屬性設(shè)置靜態(tài)文件訪問(wèn)路徑。

module.exports = {
    publicPath: './',
    devServer:{
        hot: true,
        port: 8082, // 啟動(dòng)端口
        open: true,  // 啟動(dòng)后是否自動(dòng)打開(kāi)網(wǎng)頁(yè)
    },
}

在這里插入圖片描述

publicPath屬性值為“./”時(shí)表示靜態(tài)文件的引入路徑為當(dāng)前文件夾，設(shè)置之后，可以將整個(gè)項(xiàng)目代碼隨便移動(dòng)文件夾位置而不影響靜態(tài)文件的訪問(wèn)。

補(bǔ)充：

vue+electron 修改默認(rèn)安裝目錄

1. 在package.json或vue.config.js文件中，在nsis 添加 include 屬性：

module.exports = {
  pluginOptions: {
    electronBuilder: {
         win: {
          icon: './icons/icon.ico',
          target: [
            {
              target: 'nsis',
              arch: [
                'ia32'
              ]
            }
          ],
         },
         ...
         nsis: {
          // 一鍵安裝，如果設(shè)為true，nsis設(shè)置就無(wú)意義請(qǐng)直接刪除 nsis 配置
          oneClick: false,
          // true全用戶安裝【目錄為：C:\Program Files (x86)】，false安裝到當(dāng)前用戶
          perMachine: true,
          // 允許請(qǐng)求提升。 如果為false，則用戶必須使用提升的權(quán)限重新啟動(dòng)安裝程序。
          allowElevation: true,
          // 允許修改安裝目錄
          allowToChangeInstallationDirectory: true,
          // 創(chuàng)建桌面圖標(biāo)
          createDesktopShortcut: true,
          // 創(chuàng)建開(kāi)始菜單圖標(biāo)
          createStartMenuShortcut: true,
          // 快捷方式的名稱,默認(rèn)為應(yīng)用程序名稱
          // shortcutName: 'HX',
          // 安裝圖標(biāo)
          installerIcon: './icons/icon.ico',
          // 卸載圖標(biāo)
          uninstallerIcon: './icons/icon.ico',
          // 安裝時(shí)頭部圖標(biāo)
          installerHeaderIcon: './icons/icon.ico',
          // 配置 nsn 如修改默認(rèn)安裝目錄
          include: './installer.nsh'
        }
        ...
      }
    }
  }
}

2. 根目錄新建 installer.nsh 文件：

installer.nsh 一般和vue.config.js為同級(jí)目錄

D:\Program Files (x86) 為定義安裝目錄，可修改

${PRODUCT_NAME} 為應(yīng)用名稱變量，一般沒(méi)不需要改

!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

到此這篇關(guān)于vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑的文章就介紹到這了,更多相關(guān)vue靜態(tài)文件訪問(wèn)路徑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: