vue項目設置打包后的靜態(tài)文件訪問路徑

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

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

vue項目設置打包后的靜態(tài)文件訪問路徑

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

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

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

vue項目的靜態(tài)文件訪問設置：
vue項目的最終項目文件需要經過打包輸出，靜態(tài)文件的訪問路徑需要在vue.config.js文件中設置。
1、vue.config.js文件中，module.exports中沒有配置publicPath屬性時，默認靜態(tài)文件通過服務器根目錄訪問。
2、vue.config.js文件中配置publicPath屬性設置靜態(tài)文件訪問路徑。

module.exports = {
    publicPath: './',
    devServer:{
        hot: true,
        port: 8082, // 啟動端口
        open: true,  // 啟動后是否自動打開網頁
    },
}

在這里插入圖片描述

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

補充：

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,
          // 創(chuàng)建桌面圖標
          createDesktopShortcut: true,
          // 創(chuàng)建開始菜單圖標
          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項目設置打包后的靜態(tài)文件訪問路徑的文章就介紹到這了,更多相關vue靜態(tài)文件訪問路徑內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: