Vue-Cli - 如何在 index.html 中加載外部文件（從根目錄中）

Question

首先，我有一個這樣的文件夾結構（並且不能修改）：

|- base_shared
|- 控制
|- .js 文件
|- 庫
|- .js 文件
|-項目 A （使用 Vue-Cli 創建）
|-項目 B （使用 Vue-Cli 創建）

在base_shared文件夾中，我們存儲了需要與所有項目共享的所有文件，它包括庫、UI 控件等......這些大多數是.js文件，沒有任何類型的export default或類似文件，因為它們是 simple.js。 這些文件經常被修改，並且經常在base_shared中添加所有項目都可以使用的新文件。

文件夾Project A/B是 Vue-Cli 創建的項目，具有自己的 vue.config.js、路由和.vue組件。 在每個項目中，我們都有一個public/index.html文件。 在這里，我們加載了大部分庫，.css 和 .js 文件。 （不使用import() ，但在頭部使用<script src=...> ）

我的問題是：
如何在每個項目的 index.html 中加載 <%= BASE_URL %> 之外的文件（在這種情況下，來自base_shared的文件）？ 所有這些文件都需要在運行時在項目的所有部分/視圖/組件中全局訪問。

我嘗試了很多事情，例如：
src="../base_shared/controls..."
src="<%= BASE_URL %>../base_shared/controls...
但顯然它不會工作，因為它不在根/主機 scope （讓我們現在假設主機是 http://localhost:8081/）我也在 vue.config.js 中使用resolve.alias為'@base': path.resolve(__dirname, '../base_shared')

我習慣了 IIS 服務器，在那里我可以創建一個“虛擬目錄”來指向base_shared ，然后在我的項目中使用它，就像文件夾在項目根目錄中一樣（如果不是，它是虛擬的）

在 Vue/Node 中有類似的東西嗎？ 我可以配置虛擬路徑嗎？ 還是我需要重新考慮這個想法？

Answer 1

您是否嘗試將其設置到您的 vue.config.js 中？

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('libs', path.resolve(__dirname, '../base_shared/'))
    }
}

他們使用import.... from....到您的腳本塊中。

<script>
   import { packagename } from "packagefolder/package.js"
   import 'packagefolder/css/package.css'

   export default {
       ...       
   }
</script>